最近老大让负责一个移动端webapp的前端部分，可是我以前都没有做过移动端的开发/(ㄒoㄒ)/~~。老大难道是锻(shi)炼(le)我(zhi)。
image.png
最后定下来vue做技术栈，这时候就要用最新的vue-cli 3.0来做脚手架搭建项目，下面来给大家做个入门介绍，希望能够帮助到大家~
-
介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。简而言之，如果你想用vue作为前端的技术栈，可以直接用vue cli进行搭建一个项目框架，然后在里面写业务组件即可，可以省去大量的搭建项目框架的时间，最新的vue cli3.0尤为如此。
详细可见官网https://cli.vuejs.org/zh/guide/
-
环境安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
当安装成功后可以通过这个命令来检查其版本是否正确 (3.x)：
vue --version
注意:
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
-
创建一个项目
运行以下命令来创建一个新项目：
vue create hello-world
执行后会出现下面这样的界面:
image.png
解释一下:
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
这里:vue-cli3.0在你创建后会有一个保存当前配置的功能,所以前面两项都是我之前手动选择特性后保存的。第一次vue create的时候肯定是没有的。
这里我们选择最后一项，即“手动选择特性”选择需要的设置(移动到最后一项，然后按回车确定)。
-
配置项目插件和功能
上面回车后会出现:
image.png
这里需要集成什么 就选就行了(按空格键选中)。
选中之后还会有些选项:
这里我选scss
image.png
这里我选ESlint + Prettier
image.png
这里选择语法检查的方式 保存就检查 还是fix和commit时候检查，我就默认选第一个了
image.png
这里是把babel,postcss,eslint这些配置文件放哪
1.独立文件放置
2.放package.json里
个人喜好，我选了第一个
image.png
最后就是选择 是否记录一下？ 下次继续使用这套配置 ，这里咱就不存了，存多了不知道怎么删除/(ㄒoㄒ)/~~
稍等一波，就装好了
image.png
-
项目文件分析
整体目录精简了不少
image.png
从图中可以看出已经没有了之前webpack配置的文件，这个时候如果要进行相关的配置，需要在根目录下创建vue.config.js,然后在里面进行相关的配置，这一点要注意。
image.png
vue.config.js里
大概包括了配置 常用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第三方插件等等
详细配置可以看官方文档 详细config配置
- webpack常用配置
这里我列举一些常用的webpack配置，可以直接copy到vue.config.js，供大家参考
1.port
这里我先改个端口, 修改vue.config.js 然后重新启动工程 , 可以看到已经改成8081端口了
module.exports = {
lintOnSave: false,
devServer: {
port: 8081
}
}
2.alias(别名)
module.exports = {
// chainWebpack是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: (config) => {
config.resolve.alias
.set('@$', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
.set('common', resolve('src/common'))
.set('api', resolve('src/api'))
}
}
3.跨域代理
module.exports = {
devServer: {
// 跨域代理
proxy: {
'/api': {
target: 'http://xxxxxx.com', // 接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/api': ''
}
}
}
}
}
......
以上是简单的配置，如果需要更多webpack配置可以参考
1.webpack中文文档
2.vue-cli3配置参考
最后，觉得这篇文章有用的记得点个赞再走哦~
傲娇ing
网友评论