本文会详细讲解vue.js的安装与node.js安装使用vue.js,安装文档和步骤会一一提供和讲解。虚心好学,如有欠缺,多多指导。


vue.js项目环境搭建

  • vue.js安装
  • 一、script 标签 引入使用
  • 二、使用 CDN 方法
  • 三、node.js安装(推荐使用)


vue.js安装

一、script 标签 引入使用

直接下载并用 script 标签引入
下载网址:https://cn.vuejs.org/v2/guide/installation.html

下载开发版本,

elementui vue2 cdn引入方式后台模板_vue.js

二、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

Staticfile CDN(国内) :

https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg( 会保持和 npm 发布的最新的版本一致):

https://unpkg.com/vue/dist/vue.js,

cdnjs :

https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

三、node.js安装(推荐使用)

(1)打开Nodejs的官网

https://nodejs.org/en/

进入页面,我们会看到需要下载的版本

elementui vue2 cdn引入方式后台模板_vue.js_02


选择对应的版本下载即可,建议下载后一个版本,也可以选择下面的Other Downloads下载其他版本和Mac的版本。

(2)下载完成后(安装时可选择安装目录,最好不好装在C盘,以防止影响电脑运存速度)

安装完成后可以先进行下简单的测试安装是否成功了,

测试安装是否成功:

在键盘按下【win+R】键,输入cmd,然后回车进入cmd窗口

elementui vue2 cdn引入方式后台模板_命令行_03


node -v 是检测node.js是否安装成功(显示版本号即为安装成功)

npm -v 是检测npm操作管理是否完成(后面配置环境需要用到npm命令配置)

(3)安装镜像文件
在命令行中输入

npm install -g cnpm --registry=http://registry.npm.taobao.org

安装完成后输入cnpm -v检测是否安装成功

(4)安装脚手架
命令行输入

cnpm install -g vue-cli

这里的 -g 是表示全局使用
安装完成后在命令行输入 vue -v 可以查看vue版本

至此,环境已经基本搭建成功。

(5)创建vue项目
在命令行中输入:

vue init webpack hello

这是的 hello 是我创建的项目名,可以根据自己的需求命名,但推荐使用英文命名,不行的话拼音也是可以的,这样可以防止以后不必要的麻烦

创建项目时,会出现如下:

elementui vue2 cdn引入方式后台模板_node.js_04


1.项目名称

2.项目描述

3.作者

4.vue构建

5.安装路由插件

6.代码检查工具(建议不安装 如初 N 回车即可)

7.单元测试(建议不安装 如初 N 回车即可)

8.自动安装

以上除了6和7不推荐安装外,其他为必须安装

(6)安装依赖包
项目创建完成后,通过命令行输入

cd  项目名

进入项目,进入项目之后,在命令行输入命令安装依赖包

cnpm install

重新打开路径下的文件夹,我们可以看到文件夹中比之前的文件夹多了一个node_modules文件夹,到此脚手架安装完成。

(7)打开项目
在命令行中输入命令打开项目

npm run dev

一般项目不会自动打开,我们可以手动打开,在输入打开项目命令后,会输出以下页面:

elementui vue2 cdn引入方式后台模板_node.js_05


我们可以再浏览器中如输入这个 就可以打开你的项目了。

elementui vue2 cdn引入方式后台模板_vue.js_06