使用vue腳手架

目前使用的vue腳手架是3.x的版本，vue是2.x的版本。

1、安裝

npm install -g @vul/cli

2、創(chuàng)建項(xiàng)目

2.1 可以運(yùn)行下面的命令：

// hello-world是項(xiàng)目文件名
vue create hello-world 

2.2 也可以運(yùn)行下面的命令，使用圖形化界面

vue ui

項(xiàng)目的目錄結(jié)構(gòu)

• public 靜態(tài)資源文件夾，里面的內(nèi)容是不需要 webpack 做打包的

  • favicon.ico 小圖標(biāo)
  • index.html 用于 webpack 主動(dòng)生成 index.html 的模板

• src 項(xiàng)目的源文件，寫(xiě)代碼的位置。這里面所有的內(nèi)容，都會(huì)經(jīng)過(guò) webpack 的打包構(gòu)建

  • assets 靜態(tài)資源文件夾，這里面主要放 css img font 之類(lèi)的東西
  • components vue 的組件
  • app.vue vue的老二組件
  • main.js 項(xiàng)目的入口js文件

• .browserslistrc 瀏覽器的兼容配置文件，他主要是給到 postcss 使用的

• .editorconfig 告訴我們編輯器的配置

• .eslintrc.js eslint 的規(guī)則配置文件

• .gitignore git 忽略文件

• babel.config.js babel 的配置文件，.babelrc

• package-lock.json npm 鎖文件

• package.json npm 依賴(lài)項(xiàng)，與當(dāng)前項(xiàng)目的描述

• postcss.config.js postcss 的配置文件

• README.md 說(shuō)明文件

啟動(dòng)項(xiàng)目

假數(shù)據(jù) - 使用 json-server 來(lái)模擬假數(shù)據(jù)

1、自己寫(xiě) json 文件

假數(shù)據(jù)文件應(yīng)該放在public文件夾中，因?yàn)?npm run serve 是在內(nèi)存中的dist文件里運(yùn)行的，是以dist文件夾作為根目錄運(yùn)行，
而public文件夾的文件會(huì)復(fù)制到dist文件中。

2、mockjs

一款能夠創(chuàng)建假數(shù)據(jù)，并且這個(gè)數(shù)據(jù)還有些真實(shí)性，主要實(shí)現(xiàn)返回隨機(jī)數(shù)據(jù)。它主要是攔截我們的ajax請(qǐng)求實(shí)現(xiàn)。
1、安裝

npm install --save mockjs

2、去編寫(xiě) mockjs 的攔截代碼

import Mock from 'mockjs';

Mock.mock(/todos.json/, {
  'code': 0,
  'msg': function () {
    return this.code === 0 ? 'ok' : '網(wǎng)絡(luò)異常'
  },
  'data|10-20': [
    {
      'name': '@cname',
      'id|+1': 1
    }
  ]
})
// mock 文件不需要暴露出去，哪里要用只需要引入這個(gè)文件

3、哪里需要用到這個(gè)就引入第二步中的文件，在main.js中引入也可以，因?yàn)閙ain.js是打包入口文件

3、使用json-server

也是一套假數(shù)據(jù)的工具，但是能幫助我們是想數(shù)據(jù)的操作，更能模擬真實(shí)的數(shù)據(jù)庫(kù)。

1、全局安裝

npm install -g json-server

2、寫(xiě)一個(gè)json文件
3、啟動(dòng)json-server

json-server --watch db.json //db.json是文件所在的位置