安装
可以使用下列命令安装这个cli3新的包:
npm install -g @vue/cli
安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确 (3.x):
vue --version
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
创建一个项目
运行以下命令来创建一个新项目:
vue create vue-cli-pages
详情请阅读官方文档 cli.vuejs.org/zh/guide/cr…
默认的文件目录
现在让我们来修改文件目录
1.添加vue.config.js
module.exports = {
publicPath: './',
// 输出文件目录
outputDir: 'front',
// 多页配置
pages: {
admin: {
// 应用入口配置,相当于单页面应用的main.js,必需项
entry: 'src/pages/admin/main.js',
// 应用的模版,相当于单页面应用的public/index.html,可选项,省略时默认与模块名一致
template: 'public/admin.html',
// 编译后在dist目录的输出文件名,可选项,省略时默认与模块名一致
filename: 'admin.html'
},
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// webpack-dev-server 相关配置
devServer: {
// 本地端口
port: 9090,
// 代理
proxy: '',
// eslint-loader警告配置
overlay: {
warnings: true,
errors: true
}
},
// webpack相关配置
configureWebpack: {
devtool: 'source-map'
}
}
更多详细配置请查看官网 cli.vuejs.org/zh/config/#…
2. 添加第二个页面admin.html
在public目录下新建admin.html,用来后台页面的模板
3.修改src目录下的文件结构
此目录结构assets用来存放资源,component用来存放组件,view用来写不同的路由页面,app.vue是主入口页,main.js是主入口配置,router.js是路由配置,store.js是vuex配置
分析可以发现assets,component文件加可以做公共不部分,views; App.vue; main.js; router.js; store.js是一个单页。
所以我们可以仿照这个结构再建一页,形成多页
1.建立pages文件下,在下面建立index文件夹表示前台页,然后将views; App.vue; main.js; router.js; store.js移动到这个文件夹内
2.类似建立admin文件夹,修改内容
3.结合vue.config.js里的多页配置
4.已下是注意点
1.修改$mount,与public下的id对应(admin类似)
2.修改路由配置,将history模式去掉(admin类似)
3.这时重新运行你会发现还有报错,因为我们修改了文件路径,所以有些地方文件引用报错,(admin类似)