vue搭建新项目

一、安装node环境

　　1、下载node地址为：https://nodejs.org/en/

　　2、cnpm淘宝镜像安装：http://npm.taobao.org/

　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

　　

　　3、检查node，npm及吹牛拍马淘宝镜像是否安装成功：如果输出版本号，说明都安装成功

   　 

二、搭建vue项目环境

　　1、cd  到你放项目的路径下（如：想在C:\workprojects\vue\vue-personal这个路径下建立项目）

       

　　2、全局安装vue-cli，打开vscode 打开项目路径，输入  npm install --global vue-cli  回车

　   

 

 

 　　2、创建一个基于 webpack 模板的新项目: vue init webpack 项目名，回车（如：我的项目名：personal）

     

　　　说明：project name  项目名字

　　　　　　project description 项目描述

　　　　　　author 作者

　　　　　　vue build 打包方式

　　　　　　Install vue-router 是否安装vue路由

　　　　　　use ESLint to lint your code 是否启用es语法检测代码

　　　　　　set up unit tests 是否安装单元测试工具

　　　　　　setup e2e tests with Nightwatch 是否需要安装自动测试工具

　　　　　　should we run 'npm install' for you after the project has been created 是否需要在项目创建好后使用 npm install

 

　　3、项目创建完成后，就会看到项目的结构

   

 

 说明：

　　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配置等

4、进入项目：cd personal/，安装依赖 npm install 回车

5、npm run dev，启动项目

　　项目启动成功：