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（如果浏览器没有自动打开，可以手动输入）