Vuejs开发环境搭建

其他文章Vuejs的生命周期函数vue-router配置vue模板语法vue计算属性和侦听器vue Class与Style绑定vue表单输入绑定vue 组件基础

准备工作：

1. 安装node.js下载并安装node.js
   如下图所示
   

   node.js.png

安装完成之后通过命令：node -v查看当前安装的nodejs的版本 如我的是：v8.11.3

2. 安装npm
   npm其实是Node.js的包管理工具。
   最新版的node.js是集成了npm ,安装nodejs之后，npm也顺带安装了。可以通过下面的命令查看npm的版本npm -v 如我的显示的是：5.6.0

3. 安装vue-cli脚手架构建工具
   命令：sudo npm install -g vue-cli 因是全局安装，所以会用-g，不加-g只会安装在当前目录下。加sudo的目的是为了解决安装权限的问题，不加sudo可能会因为权限导致无法安装。安装时弹出密码输入时，输入自己电脑密码即可。
   安装完成之后可以到这个目录下查看安装的文件：/usr/local/lib/node_modules，该文件夹下有个文件夹是vue-cli就是我们安装的脚手架构建工具，也可以通过vue -V注意V是大写字母，可以查看vue的版本,我电脑上安装之后显示的是：2.9.6

4. 创建一个基于 webpack 模板的新项目
   命令：

#cd到你想创建项目的文件夹XX下创建项目  my-first-vue-project
vue init webpack  my-first-vue-project
或者
vue init webpack-simple my-first-vue-project

命令执行过程中会让你回答几个问题,按下面的展示操作即可

?project name  my-first-vue-project  //enter即可
?project description a vue.js project //这里是输入项目描述
?author ZekeRain//输入作者即可
?Vue build standalone //选择这个选项即可
?Install vue-router? yes
?Use ESL int to lint your code? no
?Pick an ESL int preset  standard
?Setup unit tests with Karma + Mocha ? no
? Setup e2e tests with Nightwatch？ no

执行之后my-first-vue-project文件夹下看到的效果如下：

my-first-vue-project.png

5. 项目创建之后，添加项目依赖

npm install
执行之后my-first-vue-project文件夹下看到的效果如下：

my-first-vue-project-npminstall.png

6. 编译项目并运行
   到此项目基本创建完成了，通过下面的命令就可以执行并看到页面效果了npm run dev

然后在浏览器里输入：http://localhost:8080即可看到如下效果：

vue-cli初始化项目效果图

• 说明

国内使用npm工具可能会很慢，可通过淘宝镜像使用cnpm

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

以后使用npm命令的地方都需要用cnpm替换

更新时间：2018-07-11