0.1.0 • Published 6 years ago
vuecli-dky v0.1.0
vuecli3.0.0
对比vue-cli@v2
3.0代码结构更加简洁。文档链接
亮点🌟
1. 拥有可视化操作界面 ,执行命令vue ui
可见
注意事项⚠️ 1. 安装3.0之前先卸载2.0
npm uninstall vue-cli -g
npm install @vue/cli -g
//注意点:
安装前保证node版本大于v8.10, npm版本大于 v5.6
使用nvm i升级node
npm i npm -g升级npm 版本
//如果还是安装失败,考虑清除缓存
npm cache clean --force
- 执行
npm shrinkwrap
命令,生成npm-shrinkwrap.json文件保证在所有环境下安装得到稳定的结果
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
//build之后预览,最简单的方式: 使用nodejs的静态资源服务
npm install serve -g
//-s标示但页面应用,自动查找dist目录下的index.html文件并通过http模式打开
serve -s dist
Run your unit tests
npm run test:unit
定义公共scss文件并生效
需要在vue.config.js中配置css.loaderOptions项
//参考文档 https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders //vue.config.js module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项 sass: { data: `@import "@/styles/index.scss";` } } } }
h5 hash路由#变更
export default new Router({
mode:'history', //没有# 需要后端配合设置 =》 如果路由跟router.js不匹配,则默认访问index.html页面。
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
proxy代理配置
//vue.config.js
devServer: { //配置proxy代理
proxy:{
'/mobile': {
target: 'http://cdd.mh.bangxue100.com/mobile',
// ws: true/false, //if you want to proxy websockets
changeOrigin: true,
// pathRewrite: {
// '^/mobile':''
// }
}
}
}
0.1.0
6 years ago