vue-cli3脚手架工具升级以后 更加方面和简单化
第一 nodejs版本要求
nodejs 需要在版本8.9.1以上或者更高的版本 推荐使用8.9.11 版本
可以使用nvm来安装管理 node 多个版本。
第二 vue-cli 修改为 vue/cli
需要先卸载vue-cli2
npm uninstall vue-cli -g 卸载
npm install -g ＠vue/cli 安装脚手架
vue --version 查看vue版本
第三 创建项目
vue create vuecli3demo
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性
cli-new-project.png
一般 我们选择第二个 上下键来选择 这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的
选择安装后 会出现如下图片 下面的安装可以 上下键 在按空格键 来是否选择 安装当前插件 安装即可
cli-select-features.png
继续等待安装完成 就得到我们的项目文件目录了
第四 ：如果我们还需要使用vue-cli2.0的项目怎么办
vue-cli给我们做了一个桥接工具我们安装即可
npm install -g @vue/cli-init 安装使用vue-cli2.0 版本
第五 安装成功完成后
cd vuecli3demo
npm run serve 启动项目
如果是使用ui来启动 创建项目 管理也可以
命令是 vue ui 启动即可
第六 ： 项目文件 结构
|-- dist # 打包后文件夹
|-- 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 基础配置如下
QQ截图20191115200924.png
网友评论