返回 导航

其他

hangge.com

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

作者：hangge | 2018-07-06 08:10
    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
将下载下来的 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: '',  //原来是 '/'

三、启动项目

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

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

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

四、发布项目

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

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

附：发布成一个 APP 应用

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

全部评论（0）

回到顶部