Vue.js 入门

Vue.js

使用npm安装全局安装vue-cil npm install -g vue-cli，结束后使用vue --version测试安装是否成功

新建项目

在一个文件夹中启动cmd（在文件路径输入cmd就行，回车就进入当前文件夹的cmd路径控制台），输入

vue create test-project                 创建名为test-project的项目

这样创建的项目是不包含部分webpack版本的，config配置文件要自己添加，或者使用以下创建项目

vue init webpack [project_name] 创建一个基于webpack的vue项目

运行结束后，使用cd指令跳转到项目位置，使用npm run dev或者npm run serve启动项目，具体运行名称与package.json中的

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

有关（如上，调试使用名称为serve）
运行项目，结果将生成一条本地的访问链接，在浏览器打开就可以看到效果( http://localhost:8080/)

WebPack项目打包

打包vue项目，运行npm run build，工具将自动打包项目文件，打包是为了将前端网页所需要的资源集合在一个文件夹中（包括设计时的各种js/imag…资源），生成后将保存在dist文件夹中，可以在任何后端框架部署该前端网页，用于显示效果。
需要注意的是，如果项目一开始不是基于webpack构建的，则要在项目的package.json同级目录中添加添加一个vue.config.js文件，按照文档的提示，只要在该文件中添加

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
}

该值在官网里的提示是

publicPath
Type: string
Default: ‘/’
部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

由于该文件是全局的修改，还有很多可以自定义的部分就不赘述了，需要的话只要将对应参数和值添加在module.exports大括号内部就可以。

参考

vue.config.js

关于 Vue cli 3的配置 vue.config.js 和使用