vue学习第一课---建立项目及组织结构

一、建立项目结构

1、nodejs安装---https://nodejs.org/en/download/

2、安装完毕，查看一下npm 版本  npm  -v

3、安装vue    npm install vue   

4、安装vue-cli    npm install vue-cli -g  (如果安装vue3.0，请使用npm install -g @vue/cli命令安装)

5、查看vue版本    vue -V

       注意：如果此时上面命令报错，找不到vue，说vue不是内部命令，在相应的盘里找到vue.cmd所在的目录，然后添加到path变量里。

6、vue自动化命令创建项目

   6.1使用vue2.0创建项目，使用命令vue init webpack  项目目录（如果就在当前目录下，此处可以为空）

    6.2使用vue3.0创建项目，使用命令vue create 项目名

7、运行项目

   7.1 vue2.0( npm run dev)

   7.2 vue3.0(npm run serve)

8、打包项目  npm run build

二、建立项目结构

common文件夹放入的是公共资源

三、模拟数据及模拟接口的配置

根目录下建立一个data.json,然后找到下面目录，

首先添加如下代码

//首先

const express = require('express')

const app = express()

let appData = require('../data.json')

let seller = appData.seller

let goods = appData.goods

let ratings = appData.ratings

let apiRoutes = express.Router()

app.use('/api',apiRoutes)

//end

然后找到devServer,添加如下代码：

before(app) {

app.get('/api/seller', (req, res) => {

res.json({

// 这里是你的json内容

errno: 0,

data: seller

})

}),

}