Skip to content

xqz / dianDemo

Go to a project
Toggle navigation
Toggle navigation pinning
06924185 by sunnie
Options

readme

1 parent 234923c3
Inline Side-by-side
Showing 4 changed files with 210 additions and 41 deletions
README.md
...@@ -8,25 +8,33 @@ ...@@ -8,25 +8,33 @@
8 8
9 ### Node 版本要求 9 ### Node 版本要求
10 10
11 `Vue CLI` 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 [nvm](https://github.com/nvm-sh/nvm) 或 [nvm-windows](https://github.com/coreybutler/nvm-windows) 在同一台电脑中管理多个 Node 版本。 11 `Vue CLI` 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 [nvm](https://github.com/nvm-sh/nvm) 或
12 [nvm-windows](https://github.com/coreybutler/nvm-windows) 在同一台电脑中管理多个 Node 版本。
12 13
13 本示例 Node.js 12.14.1 14 本示例 Node.js 12.14.1
14 15
15 <span id="top">目录</span> 16 <span id="top">目录</span>
16 17
18 - [√ Vue-cli4](https://cli.vuejs.org/zh/guide/)
17 - [√ 配置多环境变量](#env) 19 - [√ 配置多环境变量](#env)
18 - [√ rem 适配方案](#rem) 20 - [√ rem 适配方案](#rem)
19 - [√ Vue-cli4](https://cli.vuejs.org/zh/guide/) 21 - [√ VantUI 组件按需加载](#vant)
20 - [√ VantUI 组件按需加载](#vant) 22 - [√ Sass](#sass)
21 - [√ Sass](#sass) 23 - [√ Webpack 4](#webpack)
22 - Webpack 4 24
23 - Vuex 25 - [√ Vuex](#vuex)
24 - Axios 封装 26 - [√ Axios 封装](#axios)
25 - 生产环境 cdn 优化首屏加速 27 - [√ Vue-router](#router)
26 - babel 低版本浏览器兼容 28 - [√ vue.config.js 基础配置](#base)
27 - Eslint+Pettier 统一开发规范 29 - [√ vue.config.js 配置 proxy 跨域](#proxy)
30 - [√ vue.config.js 配置 proxy 跨域](#proxy)
31
32 * Vuex
33 * Axios 封装
34 * 生产环境 cdn 优化首屏加速
35 * babel 低版本浏览器兼容
36 * Eslint+Pettier 统一开发规范
28 37
29
30 ### <span id="env">✅ 配置多环境变量 </span> 38 ### <span id="env">✅ 配置多环境变量 </span>
31 39
32 &emsp;&emsp;NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用 40 &emsp;&emsp;NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用
...@@ -48,8 +56,8 @@ ...@@ -48,8 +56,8 @@
48 ##### 配置介绍 56 ##### 配置介绍
49 57
50 &emsp;&emsp;以 `VUE_APP_` 开头的变量，在代码中可以通过 `process.env.VUE_APP_` 访问。 58 &emsp;&emsp;以 `VUE_APP_` 开头的变量，在代码中可以通过 `process.env.VUE_APP_` 访问。
51 &emsp;&emsp;比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问 59 &emsp;&emsp;比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问 &emsp;&emsp; 除了 `VUE_APP_*` 变量之外
52 &emsp;&emsp; 除了 `VUE_APP_*` 变量之外，在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV` 和`BASE_URL` 60 ，在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV` 和`BASE_URL`
53 61
54 在项目根目录中新建.env 62 在项目根目录中新建.env
55 63
...@@ -146,14 +154,15 @@ module.exports = { ...@@ -146,14 +154,15 @@ module.exports = {
146 154
147 很多小伙伴会问我，适配的问题。 155 很多小伙伴会问我，适配的问题。
148 156
149 举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。 157 举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。
150 158
151 - 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。 159 - 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑
152 - 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 160 满。
161 - 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。
153 162
154 本案例采用 Vant 是基于 375 设计稿 , rootValue: 37.5。其他的你就可以根据你设计图，去做对应的设置了。 163 本案例采用 Vant 是基于 375 设计稿 , rootValue: 37.5。其他的你就可以根据你设计图，去做对应的设置了。
155 164
156 当然，想要撑满屏幕你可以使用100%，这里只是举例说明。 165 当然，想要撑满屏幕你可以使用 100%，这里只是举例说明。
157 166
158 ```html 167 ```html
159 <img class="image" src="https://imgs.solui.cn/weapp/logo.png" /> 168 <img class="image" src="https://imgs.solui.cn/weapp/logo.png" />
...@@ -176,13 +185,14 @@ module.exports = { ...@@ -176,13 +185,14 @@ module.exports = {
176 185
177 ### <span id="vant">✅ VantUI 组件按需加载 </span> 186 ### <span id="vant">✅ VantUI 组件按需加载 </span>
178 187
179 项目采用[自动按需引入组件 (推荐)](https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-yi.-zi-dong-an-xu-yin-ru-zu-jian-tui-jian) 188 项目采
189 用[Vant 自动按需引入组件 (推荐)](https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-yi.-zi-dong-an-xu-yin-ru-zu-jian-tui-jian)下
190 面安装插件介绍：
180 191
181 下面安装插件介绍： 192 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 `babel` 插件，它会在编译过程中将
193 `import` 的写法自动转换为按需引入的方式
182 194
183 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 `babel` 插件，它会在编译过程中将 `import` 的写法自动转换为按需引入的方式 195 #### 安装插件
184
185 # 安装插件
186 196
187 ```javascript 197 ```javascript
188 npm i babel-plugin-import -D 198 npm i babel-plugin-import -D
...@@ -204,7 +214,7 @@ module.exports = { ...@@ -204,7 +214,7 @@ module.exports = {
204 } 214 }
205 ``` 215 ```
206 216
207 # 使用组件 217 #### 使用组件
208 218
209 项目在 `src/plugins/vant.js` 下统一管理组件，用哪个引入哪个，无需在页面里重复引用 219 项目在 `src/plugins/vant.js` 下统一管理组件，用哪个引入哪个，无需在页面里重复引用
210 220
...@@ -216,26 +226,182 @@ Vue.use(Button) ...@@ -216,26 +226,182 @@ Vue.use(Button)
216 Vue.use(Cell) 226 Vue.use(Cell)
217 Vue.use(List) 227 Vue.use(List)
218 Vue.use(Tabbar).use(TabbarItem) 228 Vue.use(Tabbar).use(TabbarItem)
229 ```
230
231 [▲ 回顶部](#top)
232
233 ### <span id="sass">✅ Sass </span>
234
235 首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！
219 236
237 在 `src/assets/css/`文件夹下包含了三个文件
238
239 - `index.scss` 主入口，主要引入其他两个 scss 文件，和公共样式
240 - `variables.scss` 定义变量
241 - `mixin.scss` 定义 `mixin` 方法
242
243 你可以直接在 vue 文件下写 sass 语法
244
245 ```html
246 <style lang="scss" scoped>
247 .demo {
248 .title {
249 font-size: 12px;
250 }
251 }
252 </style>
220 ``` 253 ```
254
221 [▲ 回顶部](#top) 255 [▲ 回顶部](#top)
222 256
223 ### <span id="sass">✅ Sass </span> 257 ### <span id="sass">✅ Sass </span>
224 258
225 首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！ 259 首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！
260
261 在 `src/assets/css/`文件夹下包含了三个文件
226 262
227 在 `src/assets/css/`文件夹下包含了三个文件 263 - `index.scss` 主入口，主要引入其他两个 scss 文件，和公共样式
228 - `index.scss` 主入口，主要引入其他两个scss文件，和公共样式
229 - `variables.scss` 定义变量 264 - `variables.scss` 定义变量
230 - `mixin.scss` 定义 `mixin` 方法 265 - `mixin.scss` 定义 `mixin` 方法
231 266
232 你可以直接在vue文件下写 sass 语法 267 你可以直接在 vue 文件下写 sass 语法
233 268
234 ```html 269 ```html
235 <style lang="scss" scoped> 270 <style lang="scss" scoped>
236 271 .demo {
272 .title {
273 font-size: 12px;
274 }
275 }
237 </style> 276 </style>
277 ```
278
279 [▲ 回顶部](#top)
280
281 ### <span id="base">✅ Vue-router </span>
282
283 本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base`
284
285 **注意**：如果你使用了 `history` 模式，`vue.config.js` 中的 `publicPath` 要做对应的**修改**
286
287 前往:[vue.config.js 基础配置](#base)
288
289 ```javascript
290 import Vue from 'vue'
291 import Router from 'vue-router'
292
293 Vue.use(Router)
294 export const router = [
295 {
296 path: '/',
297 name: 'index',
298 component: () => import('@/views/home/index'), // 路由懒加载
299 meta: {
300 title: '首页', // 页面标题
301 keepAlive: false // keep-alive 标识
302 }
303 }
304 ]
305 const createRouter = () =>
306 new Router({
307 // mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath
308 // base: '/app/',
309 scrollBehavior: () => ({y: 0}),
310 routes: router
311 })
312
313 export default createRouter()
314 ```
315
316 更多:[Vue Router](https://router.vuejs.org/zh/)
238 317
318 [▲ 回顶部](#top)
319
320 ### <span id="base">✅ vue.config.js 基础配置 </span>
321
322 如果你的 `Vue Router` 模式是 hash
323
324 ```javascript
325 publicPath: './',
326 ```
327
328 如果你的 `Vue Router` 模式是 history 这里的 publicPath 和你的 `Vue Router` `base` **保持一直**
329
330 ```javascript
331 publicPath: '/app/',
332 ```
333
334 ```javascript
335 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
336
337 module.exports = {
338 publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
339 // publicPath: '/app/', // 署应用包时的基本 URL。 vue-router history模式使用
340 outputDir: 'dist', // 生产环境构建文件的目录
341 assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
342 lintOnSave: false,
343 productionSourceMap: !IS_PROD, // 生产环境的 source map
344 devServer: {
345 port: 9020, // 端口号
346 open: false, // 启动后打开浏览器
347 overlay: {
348 // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
349 warnings: false,
350 errors: true
351 }
352 // ...
353 }
354 }
355 ```
356
357 [▲ 回顶部](#top)
358
359 ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span>
360
361 ```javascript
362 module.exports = {
363 devServer: {
364 // ....
365 proxy: {
366 //配置跨域
367 '/api': {
368 target: 'https://test.xxx.com', // 接口的域名
369 ws: true, // 是否启用websockets
370 changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
371 pathRewrite: {
372 '^/api': '/'
373 }
374 }
375 }
376 }
377 }
378 ```
379
380 使用
381
382 ```javascript
383 <script>
384 import axios from "axios"
385 export default {
386 mounted() {
387 axios.get("/api/1").then(res => {
388 });
389 }
390 };
391 </script>
392 ```
393
394 [▲ 回顶部](#top)
395
396 ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span>
397
398 ```javascript
399 publicPath: './', // 署应用包时的基本 URL router hash 模式使用
400 // publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', //router history模式使用 需要区分生产环境和开发环境，不然build会报错
401 outputDir: 'dist', // 生产环境构建文件的目录
402 assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
403 lintOnSave: false,
404 productionSourceMap: !IS_PROD, // 生产环境的 source map
239 ``` 405 ```
240 406
241 [▲ 回顶部](#top) 407 [▲ 回顶部](#top)
......
src/router/index.js
...@@ -6,9 +6,10 @@ export const router = [ ...@@ -6,9 +6,10 @@ export const router = [
6 { 6 {
7 path: '/', 7 path: '/',
8 name: 'index', 8 name: 'index',
9 component: () => import('@/views/home/index'), 9 component: () => import('@/views/home/index'), // 路由懒加载
10 meta: { 10 meta: {
11 keepAlive: false 11 title: '首页', // 页面标题
12 keepAlive: false // keep-alive 标识
12 } 13 }
13 } 14 }
14 ] 15 ]
......
vue.config.js
...@@ -5,7 +5,7 @@ function resolve(dir) { ...@@ -5,7 +5,7 @@ function resolve(dir) {
5 return path.join(__dirname, dir) 5 return path.join(__dirname, dir)
6 } 6 }
7 const name = defaultSettings.title || 'vue mobile template' // page title 7 const name = defaultSettings.title || 'vue mobile template' // page title
8 const port = 9018 // dev port 8
9 const externals = { 9 const externals = {
10 vue: 'Vue', 10 vue: 'Vue',
11 'vue-router': 'VueRouter', 11 'vue-router': 'VueRouter',
...@@ -33,20 +33,22 @@ const cdn = { ...@@ -33,20 +33,22 @@ const cdn = {
33 ] 33 ]
34 } 34 }
35 } 35 }
36 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
36 module.exports = { 37 module.exports = {
37 publicPath: './', // router hash 模式使用 38 publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
38 // publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', //router history模式使用 需要区分生产环境和开发环境，不然build会报错 39 // publicPath: '/app/', //署应用包时的基本 URL。 vue-router history模式使用
39 outputDir: 'dist', 40 outputDir: 'dist', // 生产环境构建文件的目录
40 assetsDir: 'static', 41 assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
41 lintOnSave: process.env.NODE_ENV === 'development', 42 lintOnSave: false,
42 productionSourceMap: false, 43 productionSourceMap: !IS_PROD, // 生产环境的 source map
43 devServer: { 44 devServer: {
44 port: port, 45 port: 9020, // 端口
45 open: false, 46 open: false, // 启动后打开浏览器
46 overlay: { 47 overlay: {
48 // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
47 warnings: false, 49 warnings: false,
48 errors: true 50 errors: true
49 }, 51 }
50 // proxy: { 52 // proxy: {
51 // //配置跨域 53 // //配置跨域
52 // '/api': { 54 // '/api': {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!