提示:Vue CLI要求Node.js版本8或者更高(8.10.0+ 推荐)。
这一部分请访问网址:https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000
全局安装vue以及vue-cli,在cmd命令行输入
npm install -g vue @vue/cli
或 cnpm install -g vue @vue/cli
或 yarn global add vue @vue/cli
(这里我用的 cnpm 安装的,国内的淘宝镜像速度会快许多…)
已经安装过vue的直接安装vue/cli即可
npm install -g @vue/cli
或 cnpm install -g @vue/cli
或 yarn global add @vue/cli
(install代表安装,可简写成i,global代表全局,也可以简写成g,简写后:npm i --g vue @vue/cli)
这个是vue-cli3.0之后的版本,这个版本新增了一些新的功能,其中最最要的就是使用vue ui可以唤起图形界面
这里面可以更直观的查看到你项目中所使用的插件,也可以在这里直接搜索你所需要安装的插件进行安装,这个相比直接
命令行输入更加简洁易懂,下面是换期后的页面:
导入项目
项目依赖
执行任务
先定位到第一步创建的目录中
使用cmd命令输入: vue create test(test这个是项目名)
与 2.0 不同的是这里不再是选择模板,而是预设 presets
选择 [默认] 将直接开始安装
这是默认配置的项目结构
选择 [自定义]
方向键上下移动,空格选中,Enter确定,自定义配置中,您将会看到这些配置项:
自定义细节配置
Use class-style component syntax? (Y/n):是否使用babel做转义 yes
Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) :是否使用class风格的组件语法 yes
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n):是否使用history模式
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
选择预处理的模式
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
Pick a linter / formatter config: (Use arrow keys):选择语法检测规范
TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
Pick additional lint features: (Press <space> to select, to toggle all, to invert selection)
选择 保存时检查 / 提交时检查
(*) Lint on save
( ) Lint and fix on commit
Pick a unit testing solution: (Use arrow keys) :测试方式
Mocha + Chai
Jest
Pick a E2E testing solution: (Use arrow keys) :e2e测试方式
Cypress (Chrome only)
Nightwatch (Selenium-based)
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
选择配置信息存放位置,单独存放或者并入package.json
In dedicated config files
In package.json
Save this as a preset for future projects? (y/N) :是否保存当前预设,下次构建无需再次配置
安装完成后的项目结构:
相比于vue-cli3.0之前的版本,结构简洁了很多
public相当于原来的static,里面的index.html是项目的入口
src同以前一样
cli3.0没有build和config了,
想要配置的话,需要在项目根目录下创建vue.config.js文件
详情请访问官网:https://cli.vuejs.org/
配置文件去哪了?
之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那?
只需要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录)
语法
module.exports = {
// 基本路径
baseUrl: '/',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: {
'/BeMoralOfficial': {
target: 'http://****.****.****.****:8001', //目标接口域名
secure: false, //false为http访问,true为https访问
changeOrigin: true, //是否跨域
pathRewrite: {
'^/BeMoralOfficial': '/BeMoralOfficial' //重写接口
}
}
}, // 设置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
至此项目就已经构建完成了。