使用vue-cli搭建项目

转自：https://www.hangge.com/blog/cache/detail_2109.html

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）运行如下命令安装：

1	npm install -g vue-cli

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

1	npm update vue-cli -g

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

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

1

vue -V

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

 

二、构建项目

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

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

 

2，接着执行如下命令

1	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 文件路径正确，这样做好处是：

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

 

1 2 3 4 5 6 7 8

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

 

三、启动项目

（1）进入到项目文件夹中，执行如下命令：

1	npm run dev

（2）项目启动成功后显示如下地址和端口：

 

（3）我们使用浏览器访问这个地址就可以看到如下画面，说明整个项目已经构建成功了。

 

四、发布项目

（1）在项目开发完成之后，我们可以执行如下命令来进行打包工作。

1	npm run build

（2）打包完成后，项目中会生成 dist 文件夹，我们只需要 dist 文件夹里的内容放到服务器上就行了。

 

附：发布成一个 APP 应用

可能我们想用 Vue.js 开发一个手机应用，如何将开发好的 vue 项目打包成 app，可以参考我之前写的这篇文章：

• Cordova - 打包Vue项目的详细步骤（将Vue.js项目编译成App）