通过vue cli 可以快速进行vue项目的框架搭建,接下来对其搭建和使用进行简单的介绍。
一、全局安装:
npm install -g @vue/cli
二、创建一个vue项目
1 vue create 项目名称(比如:test)回车
2 选择手动选择功能
正常情况选择 babel router vuex css 就够了,其它根据情况选择(选择时按空格键)如下图:
3 路由选择
n代表hash y代表history 根据具体情况选择
4css选择 有以下几种,根据情况选择,一般选择node-sass 其它几种基本一样
5 生成package.json配置文件
6不保存预设,下次建项目重新配置,选择n
等待执行完毕…
7 cd test 切换到当前项目根目录
npm run serve 运行测试
通过 http://localhost:8081/正常打开,如下图所示,表示项目创建成功
三、使用要点
1 、项目整体结构介绍,如下图:
2 注意事项
1 如果数据是多组件共享可以使用vuex来存储数据,否则直接使用data存储即可;在使用vuex存储时,可以使用辅助函数(mapState,mapMutations,mapGetters,mapActions,具体使用可以去查看vuex文档)使代码更简洁
2 如果需要配置webpack,需要新建一个vue.config.js文件(文件名唯一,不可随意更改),具体的配置可以去vue官网查看
3 vue.config.js文件配置完毕,可以通过vue inspect > output.js,在output.js文件中对比查看一下自己的配置是否正确(这点很重要)
4 简化路径的方法:利用了webpack的链式调用,下图来自vue官网
chainWebpack: config => {
// 别名配置,路径的间接跳转 不需要写 ../
config.resolve.alias
.set('assets', path.resolve(__dirname, './src/assets/'))
.set('views', path.resolve(__dirname, './src/views/'))
}
5 移动端的适配,推荐使用插件: postcss-px-to-viewport
具体使用可以查看: vue官网介绍 npm对其使用的介绍
下面的写法可以从上面两个文档中找到
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
plugins: [
new pxtovw({
unitToConvert: 'px',
// 这个值要根据移动端屏幕宽度来设置
viewportWidth: 375,
unitPrecision: 5,
// 可以过滤某些文件不转换vw
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
// 忽略某些文件夹
exclude: [/node_modules/]
})
]
}
}
},
以上就是vue cli简单的使用,后续会继续更新。