由于最近学习Vue脚手架，如何让新手快速搭建一个项目工程，并配置好项目中所必须的配置文件，特此写下一篇博客文章以此来做一下笔记。话不多说.
一 .创建项目工程目录
首先是安装node环境node官网地址
下载完node安装包，傻瓜式一路下一步完成安装。
打开 CMD, 输入 node -v即可如下
图1
表示你的node环境安装完毕，引文node安装完成后，你的npm包管理器也安装好了，所以我们可以使用npm install 你需要安装的包至此，准备工作完毕。1.接下来我们需要安装Vue 全局的脚手架
npm install -g @vue/cli 或者yarn global add @vue/cli2.进入你的项目目录，创建一个基于 webpack 模板的新项目：
vue init webpack vue-demo
创建项目工程
- Vue build ==> 打包方式，回车即可；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
3.进入项目：cd vue-demo，安装依赖
安装项目所需要的依赖
安装成功后，项目文件夹中会多出一个目录：node_modules
如图
4npm run dev，启动项目
项目启动成功
- 打开浏览器输入##http://localhost:8080##即可访问你创建的项目默认的首页[图片上传失败...(image-e7d303-1560410494966)]
二.项目工程目录介绍
初始目录
1.build：构建脚本目录
1）build.js ==> 生产环境构建脚本；
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；
2.config：项目配置
1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3）prod.env.js ==> 生产环境变量；
3.node_modules：npm 加载的项目依赖模块这个目录可删除，再重新执行
npm install 即可重新安装回来4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建。
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
三. 项目配置文件和一些必须的工具方法配置
1.首先项目请求的方法我喜欢使用axios ,看个人喜欢，有些喜欢使用fetch，或者其他的库都行，在这介绍一下我请求api数据的方法话不多说直接上代码：api文件夹下 index.js文件：
import axios from 'axios'
import store from '@/store'
import qs from "qs"
import {getToken} from '@/libs/util'
import router from '@/router'
let cancel, promiseArr = {}
const CancelToken = axios.CancelToken;
// 创建axios默认请求
const service = axios.create({
baseURL: "",
timeout: 5000, // request timeout,
})
// 请求拦截
service.interceptors.request.use(config => {
// 为了防止重复请求ajax
if (promiseArr[config.url]) {
promiseArr[config.url]('操作取消')
promiseArr[config.url] = cancel
} else {
promiseArr[config.url] = cancel
}
// 拼接公共参数
config.params = Object.assign({}, config.params)
//当为传统接收方式post的时候对参数进行序列化
if ( config.method === "put" || config.method === "delete" ) {
// 序列化
config.headers = {
'Content-Type': "application/x-www-form-urlencoded;charset=utf-8" //当post的时候请求头需要序列化
};
config.data = qs.stringify(config.data);
}
// 是否携带cookie不知
if (store.getters.token) {
config.headers['Token'] = getToken() // 让每个请求携带token-- ['Token']为自定义key 请根据实际情况自行修改
}
return config
}, error => {
// console.log(error) // for debug
Promise.reject(error)
})
// 响应拦截
service.interceptors.response.use(
response => response,
error => {
if (error) {
switch (error.response.status) {
case 401:
router.push({
path: "/login"
});
error.response.statusText = '未授权，请重新登录'
break;
case 404:
error.response.statusText = '请求错误,未找到该资源'
break;
}
} else {
error.response.statusText = "连接到服务器失败"
}
return Promise.reject(error)
})
export default {
//get请求
get(url, param) {
return new Promise((resolve, reject) => {
service({
method: 'get',
url,
params: param,
// 取消请求函数创建
cancelToken: new CancelToken(c => {
cancel = c
})
}).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
//post请求
post(url, param) {
return new Promise((resolve, reject) => {
service.post( url, param, // 取消请求函数创建
{ cancelToken: new CancelToken(c => {
cancel = c
})
}
).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
}
}
2.对项目中的所有的接口数据进行模块整理：关于用户登录接口 loginController.js
import httpExtension from './index'
import qs from 'qs';
const baseUrl = '/api' // 此处是为了方便统一管理，另一种目的是为了webpack为我们提供代理的功能
export const getUserInfo = () => httpExtension.get(`${baseUrl}/user/getUserInfo`)
export const login = (data) => httpExtension.post(`${baseUrl}/user/login`, qs.stringify(data))
export const logout = () => httpExtension.post(`${baseUrl}/user/logout`)
3.页面使用接口：
<script>
import { login } from '@/api/loginController'
export default {
data() {
return {
loginParams：{username: '',password: ''}
}
}
},
methods: {
click() {
this._login(this.loginParams)
},
async _login(params) {
const res = await login(params)
if (res.responseCode === 0) {
console.log(res.responseData)
}
},
}
</script>
4.对于前面介绍的webpack代理接口，在这说明一下以供参考：通常遇到的跨域问题，在vue项目里可以使用webpack提供的代理解决：
devServer: {
port: 8080, // 端口
open: process.platform === 'darwin',
host: '0.0.0.0',
https: false,
hotOnly: false,
proxy:{
'/api/*' : {
target: 'http://localhost:3000',// 需要代理的后台服务ip
changeOrigin: true,
logLevel: 'debug',
pathRewrite: { '^/api': '/' }
},
}
}
详情可以去看Vue官方文档，再次就不多赘述了，学习是自己的，一起加油！
你好，我是divine6,初次见面，请多关照！
网友评论