vue-cli脚手架构建一个vue项目

写在前面的话

 

在开始建立一个vue项目以前，须要具有如下的条件

 

环境：

 

Node.js: javascript运行环境,不一样系统直接运行各类编程语言；

npm: Nodejs下的包管理器。国内使用npm会很慢,推荐使用淘宝NPM镜像（http://npm.taobao.org/）；

 

工具：

 

WebPack:简单的说是模块打包器， 经过 CommonJS 的语法把全部浏览器端须要发布的静态资源作相应的准备，好比资源的合并和打包。；

 

cli-vue: 用户生成Vue工程模板, 安装一个全局的脚手架：

npm install -g vue-cli

 

这样的速度比较慢，建议镜像安装：

cnpm install -g vue- cli

；

 

确保环境和工具，以及安装过vue的话，开始步入正题

---

 

• 第一步：打开要构建项目的文件夹，shift+鼠标右键，打开命令窗口，输入 

 

vue init webpack app005   

 

上面的指令的意思是：使用wenpack建立一个vue项目在app005 的文件夹里面

 

若是一路回车，会有几个基本的选项

 

 

回车结束以后，打开app005的文件夹，目录下面会多出不少文件

 

打开其中的package.json,里面会有描述咱们这个项目所须要的依赖，

那么接下来，咱们须要安装这些依赖

 

• 第二步：进入到app005目录下(cd app005),安装依赖

 

若是安装了淘宝镜像的话，用cnpm代替npm

 

命令：

cnpm install

 

 

 

 

第二步完成后，在咱们的app005目录下面 会多出一个 node_modules的文件夹，里面放的就是以前下载的依赖文件；

 

• 第三步，让这个项目运行起来吧

 

在app005目录下的命令行中输入：

 

 npm run dev

 

以后会用热加载的方式运行咱们的应用，热加载能够让咱们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

 

npm run dev ： dev是package.json中的scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

 

 

项目运行成功后，浏览器会自动打开localhost:8080（若是浏览器没有自动打开，能够手动输入）