一直在路上......
vue-cli3使用,傻瓜式的搭建
2018-09-11 20:31
#### vue-cli3 安装 确保安装有node环境,node版本要大于8.9 用npm: ``` npm install -g @vue/cli ``` 用yarn ``` yarn global add @vue/cli ``` 检查是否安装成功 ``` vue --version ``` #### 创建项目 命令行运行 ``` vue create {project name} ``` 根据提示一步一步来就可以了 vue-cli3还可以用命令行 ```vue ui``` 打开图形界面,进行创建项目以及配置,创建好项目, ```npm run serve``` 或者 ```yarn serve``` 就开启了服务 #### 配置 vue-cli3基本不需要什么配置就可以运行项目了,如果要配置,我们就可以新建一个vue.config.js文件,运行服务时会自动加载这个文件,就再也不用担心改配置出一大堆错误了,真的是越来越人性化,简单化 ######## 多页面应用配置 这里重点说一下多页面的配置,因为以前要使用多页面,需要改很多地方,vue-cli3让我们很简单的一点配置就可以使用开发多页面了 vue.config.js示例: ``` module.exports = { pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时, // template 中的 title 标签需要是 <#%= htmlWebpackPlugin.options.title #%> title: 'Index Page', // 在这个页面中包含的块,默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 当使用只有入口的字符串格式时, // 模板会被推导为 `public/subpage.html` // 并且如果找不到的话,就回退到 `public/index.html`。 // 输出文件名会被推导为 `subpage.html`。 subpage: 'src/subpage/main.js' } } ``` 配置超级简单,当然 `src` 目录也要改变一下,就可以把更多精力放在代码的编写上了哈