安装@vue/cli
注意:vue-cli3.0需要node8.9或更高版本(推荐8.11.0+)
npm install -g @vue/cli
// 或者
yarn global add @vue/cli
安装后,可检查其版本:
使用vue --version【注意:符号为双 “ - ”】或者vue -V【注意:此处是大写 “ V ”】
-V,-- version ——版本输出版本号
-h,-- help ——帮助输出使用信息
如图:
注:
若此时,仍需要用vue-cli 2.x版本语法(vue init),需下载一个桥接工具:
npm install -g @vue/cli-init
Command vue init requires a global addon to be installed.
命令vue init 需安装一个全局插件。
please run npm install -g @vue/cli -init and try again.
请运行 npm install -g @vue/cli -init ,然后重试。
vue create '项目名称'
此处,我们可以选默认的包含了基本的Babel+ESLint设置的preset,也可以选手动选择特性来选取需要的特性。
默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的,下面以 ”手动设置“ 为例。
注: 按<上下键>移动,按
我选择的是node-sass
这个都可以选,我选择的是第一个专用配置文件
哈哈,我报错了,不过,不用惊慌,这是网络问题,重新npm i 即可。
【回顾:vue-cli 2.0 运行项目使用命令:npm run dev】
进入创建好的项目中,运行项目
cd '项目名称'
npm run serve
//或者
yarn serve
|-- dist # 打包后文件夹
|-- node_modules # 第三方包,依赖的包文件
|-- public # 静态文件夹
| |-- favicon.ico
| |-- index.html #入口页面
|-- src # 源码目录
| |--assets # 模块资源
| |--components # vue公共组件
| |--views
| |--App.vue # 页面入口文件
| |--main.js # 入口文件,加载公共组件
| |--router.js # 路由配置
| |--store.js # 状态管理
|-- .env.pre-release # 预发布环境
|-- .env.production # 生产环境
|-- .env.test # 测试环境
|-- vue.config.js # 配置文件
|-- .eslintrc.js # ES-lint校验
|-- .gitignore # git忽略上传的文件格式
|-- babel.config.js # babel语法编译
|-- package.json # 项目基本信息
|-- postcss.config.js # CSS预处理器(此处默认启用autoprefixer)
Vue.config.js是一个可选的配置文件,如果项目的根目录存在这个文件,那么它就会被 @vue/cli-service 自动加载。你也可以使用package.json中的vue字段,但要注意严格遵守JSON的格式来写。这里使用配置vue.config.js的方式进行处理。
const webpack = require('webpack')
module.exports = {
//部署应用包时的基本 URL
publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
//当运行 vue-cli-service build 时生成的生产环境构建文件的目录
outputDir: 'dist',
//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir: 'assets',
// eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
lintOnSave: true,
//是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
runtimeCompiler: true,
// 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾
productionSourceMap: true,
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
},
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// webpack-dev-server 相关配置
devServer: { // 设置代理
hot: true, //热加载
host: '0.0.0.0', //ip地址
port: 8085, //端口
https: false, //false关闭https,true为开启
open: true, //自动打开浏览器
proxy: {
'/api': { //本地
target: 'xxx',
// 如果要代理 websockets
ws: true,
changeOrigin: true
},
'/test': { //测试
target: 'xxx'
},
'/pre': { //预发布
target: 'xxx'
},
'/pro': { //正式
target: 'xxx'
}
}
},
pluginOptions: { // 第三方插件配置
// ...
}
}
如果后续想在已经被创建好的项目中安装插件,可以使用 vue add 命令:
// e.g.
vue add element
// vue add element不仅添加依赖还会修改你的项目页面,帮我们自动做好element的配置