Vue项目构建

Vue项目初始化

一、Node环境安装

1、Node下载地址

https://nodejs.org/en/

选择稳定版本：

2、检查Node是否安装成功

命令：

node -v

返回安装的Node版本号：

3、安装npm淘宝镜像

官方镜像较慢，为了提高速度，建议安装使用淘宝镜像

命令：

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

检测是否安装成功：

命令：

cnpm -v

返回结果截图：

二、Vue项目初始化

1、安装vue-cli

命令：

cnpm install vue-cli -g   //全局安装

安装截图：

检测是否安装成功

命令：

vue list

运行截图：

2、创建项目

命令：

vue init webpack  "项目名称"

运行截图：

操作步骤	描述	操作值
1	项目名称	回车
2	项目描述	回车
3	作者	回车
4	打包方式	回车
5	是否安装路由vue-router插件	yes
6	是否使用ESLint来检测你的代码	no
7	是否设置单元测试	yes
8	选择一个测试运行器	回车
9	使用Nightwatch设置e2e测试	回车
10	在项目创建后为你运行npm install	回车

结果：

1、build：构建脚本目录

　　　　1）build.js  ==> 生产环境构建脚本；

　　　　2）check-versions.js  ==> 检查npm，node.js版本；

　　　　3）utils.js  ==> 构建相关工具方法；

　　　　4）vue-loader.conf.js  ==> 配置了css加载器以及编译css之后自动添加前缀；

　　　　5）webpack.base.conf.js  ==> webpack基本配置；

　　　　6）webpack.dev.conf.js  ==> webpack开发环境配置；

　　　　7）webpack.prod.conf.js  ==> webpack生产环境配置；

2、config：项目配置

　　　　1）dev.env.js  ==> 开发环境变量；

　　　　2）index.js  ==> 项目配置文件；

　　　　3）prod.env.js  ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

　　　　2）components：组件目录，我们写的组件就放在这个目录里面；

　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；

　　　　4）App.vue：根组件；

　　　　5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息``

8、README.md：项目的说明文档，markdown 格式

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

3、运行

下载安装依赖

命令：

cnpm install

运行：

cnpm run dev

访问vue项目：

路径：http://localhost:8082

结果：