Vue.js - 使用vue-cli搭建项目（附：详细操作步骤）

2018-07-06 发布：hangge 阅读：4759

Vue 是一个近年来比较火的 MVVM 前端框架。我们如果想简单地使用下 Vue，只需引入一个 js 文件即可。但如果想用的好的话，还是推荐使用 vue-cli 来构建一个完整的工程。

vue-cli 作为 Vue 的脚手架，集成了 webpack 环境及主要依赖，对于项目的搭建、打包、维护管理等都非常方便快捷。下面演示如何使用来创建项目。

Vue.js 全家桶系列：包含了 vue-router、vuex、vue-resource，以及本文介绍的构建工具 vue-cli。这些是一个完整的 vue 项目的核心构成。

一，环境搭建

1，安装Node.js

主要是用来下载和安装 vue-cli

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

将下载下来的 msi 文件运行安装即可。

在命令提示符（cmd）中运行 npm -v，如果出现版本号则说明 Node.js 安装成功

2，安装 vue-cli

（1）运行如下命令安装：

npm install -g vue-cli

（2）以后如果要更新 vue-cli，运行如下命令：

npm update vue-cli -g

3，测试下 vue-cli 是否安装成功

（1）运行如下命令（注意最后的 V 是大写）：

vue -V

（2）如果出现相应的版本号，则说明安装成功。

二、构建项目

1，在终端中运行 cd 命令，进入想要创建项目的目录位置

比如我们想把工程创建在 H 盘中 Code 目录下，首先在命令控制台中进入到这个文件夹。

2，接着执行如下命令

vue init webpack vue_demo

最后一个参数是自定义的项目名称，我这里命名为：vue_demo

3，上面命令执行后，会跳出几个选项让你回答。

除了第三个选项需要输入个作者外，其他选项我们直接回车，或者输入 y 回车即可。

各选项的具体说明：

Project name：项目名称（直接回车则使用括号中默认名字）
Project description：项目描述（直接点击回车则使用默认名字）
Author：作者
Runtime + Compiler: recommended for most users：运行加编译
Runtime-only：仅运行时
Install vue-router?：是否安装 vue-route（这是官方的路由，大多数情况下都使用）
Use ESLint to lint your code?：是否使用 ESLint 管理代码（ESLint 是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。)
Pick an ESLint preset：选择一个 ESLint 预设，编写 vue 项目时的代码风格
Setup unit tests with Karma + Mocha?：是否安装单元测试
Setup e2e tests with Nightwatch?：是否安装 e2e 测试

4，构建完毕

项目创建完毕后可以看到目录下多出了一个项目文件夹 vue_demo，进入这个文件夹可以看到目录结构如下：

注意：开发时，我们自己的项目文件都需要放到 src 文件夹下

5，修改 config/index.js

将 build 属性节点下的 assetsPublicPath 该成 '' （注意是 build 下的 assetsPublicPath，不要改 dev 下的了）

修改的目的是确保打包后外部引入的 js 和 css 文件路径正确，这样做好处是：

我们可以直接在本地打开并访问打包后的文件。
打包后的文件如果不是放在服务器根目录下也不会出问题。

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),
 
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '',  //原来是 '/'