vue cli2安装

1. 安装nodejs

npm install -g npm   npm自动更新到最新版本
node -v或者npm -v   查看nodejs是否安装成功

 

• 1
• 2

1. 配置淘宝镜像

npm config set registry https://registry.npm.taobao.org   配置淘宝镜像
npm config get registry   查看镜像地址是否设置成功

• 1
• 2

1. 安装脚手架

vue -V    查看是否存在vue版本
npm uninstall vue-cli -g   如是有的话，就用命令卸载
npm -g install vue-cli@2.9.6   安装脚手架

• 1
• 2
• 3
• 4

创建项目

1. vue init webpack vue-sample。其中vue-sample是我们所起的项目名，命名执行后，会进入项目初始化阶段。
   
   @ Project name vue222 设置项目名，可以直接按回车使用默认项目名vue222
   @ Project description A Vue.js project 设置项目描述，可以直接按回车使用默认描述
   @Author xxxxx 设置作者信息，或直接回车使用默认值
   
   @Runtime + Compiler：推荐的方案，包括运行和编译模块
   @Runtime-only：仅运行模块，更轻量级，但是在.vue文件外不允许使用templates（需使用render函数来取代对应的template属性设置）
   
   @Install vue-router? (Y/n) 是否安装vue-router？ 如果你的项目是单页应用并且包含多个细分页面，建议安装。如果你的页面只有一个或者多个不相干的页面，则不需要安装。
   
   @Use ESLint to lint your code? (Y/n) 是否使用ESLint来规范你的代码？ESLint是一款js代码风格管理工具，用于统一和规范代码风格，对于js这种脚本语言来说，良好规范的代码风格有助于提高代码的可读性和组织性，建议按照个人习惯使用。
   
   @Set up unit tests (Y/n) 是否安装单元测试框架
   
   @选择使用npm或者yarn（需使用npm全局安装yarn命令并设置yarn源为淘宝源）命令或者后续自己执行相关命令安装依赖，建议使用npm。
   
   
   2.项目创建成功，cd vue222,npm run dev运行项目。

项目结构

build: 提供webpack各环境配置方案、webpack构建和打包任务脚本（通过npm run build命令启动）
config：webpack、webpack-dev-server相关的配置参数
node_modules：node模块文件夹，通过npm安装的模块会存放在这里
src：项目开发文件夹，我们写的代码基本都放在这里
static：静态资源文件夹
.babelrc：babel配置文件
.editorconfig：编辑器配置文件
.gitignore：git忽略文件配置文件，相关文件将不会被放入到git仓库中
.postcssrc.js：postcss配置文件，用于启用相关的postcss插件
index.html：HtmlWebpackPlugin使用的html模板文件，用于自动生成相应的html模板
package.json：项目npm配置文件，主要记录项目基本信息、引用的npm模块信息、script命令列表等
README.md：项目说明MarkDown文件

注意：项目中的静态资源文件有两个地方可以存放，分别是static文件夹和src/assets文件夹，这两个文件夹下的资源在处理上是不同的。具体表现为：

1. assets 目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式如，background: url(./logo.png)中，"./logo.png" 是相对的资源路径，将由Webpack解析为模块依赖；
2. static 目录下的文件并不会被Webpack处理，它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 配置来确定的。