Vue Cli脚手架搭建Vue项目

一、安装Node.js环境

下载地址：https://nodejs.org/en/

查看版本信息

二、安装淘宝镜像

npm install -g cnpm –registry=https://registry.npm.taobao.org，以后用到npm的地方可用cnpm来代替

查看安装是否成功

三、创建Vue项目

1. 安装vue-cli

npm install --global vue-cli

2. 创建项目

vue init webpack 项目名称

问题	说明
Project name	项目名称
Project description	项目描述
Author	作者
Vue build	打包方式
Install vue-router?	是否要安装 vue-router
Use ESLint to lint your code?	是否需要 js 语法检测
Set up unit tests	是否安装单元测试工具
Setup e2e tests with Nightwatch?	是否需要 js 语法检测
Use ESLint to lint your code?	是否需要端到端测试工具
Should we run npm install for you after the project has been created? (recommended)	是否在项目创建后运行"npm install"

由于最后一个问题我选择的是no，所以需要进入项目目录运行npm install或cnpm install安装依赖

3. 启动项目

npm run dev

四、项目结构

1. build：构建脚本目录

文件名	说明
build.js	生产环境构建脚本
check-versions.js	检查npm，node.js版本
utils.js	构建相关工具方法
vue-loader.conf.js	配置了css加载器以及编译css之后自动添加前缀
webpack.base.conf.js	webpack基本配置
webpack.dev.conf.js	webpack开发环境配置
webpack.prod.conf.js	webpack生产环境配置

2. config：项目配置

文件名	说明
dev.env.js	开发环境变量
index.js	项目配置文件
prod.env.js	生产环境变量

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

4. src：项目开发的主要目录

名称	说明
assets	资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建
components	组件目录，我们写的组件就放在这个目录里面
router	前端路由，我们需要配置的路由路径写在index.js里面
App.vue	根组件
main.js	入口js文件

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

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

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

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

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

五、解决cnpm命令报错问题

执行cnpm命令时可能会报下面的错误

cnpm : 无法加载文件 C:\Users\10502\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Poli
cies。
所在位置 行:1 字符: 1
+ cnpm i
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

解决办法：以管理员身份运行 Windows PowerShell —— set-ExecutionPolicy RemoteSigned(更改执行策略) —— 输入 Y(执行更改策略)