vue项目的新建

1.环境搭建：npm的安装

1.1 首先：先从nodejs.org中下载nodejs

node -v ：查看node.js版本;
npm -v :查看npm-v版本。

1.2 全局安排vue-cli
cnpm install vue-cli -g //全局安装 vue-cli
查看vue-cli是否成功，不能检查vue-cli,需要检查vue —vue list

1.3 选定路径，新建vue项目
vue init webpack ‘项目名称’

1.4 安装依赖并运行
安装依赖 cnpm install
运行 npm run dev

1.5 登录 localhost：8080

1.6 项目文件夹

1.7 vue项目目录
1. build：构建脚本目录
1.1 build.js —生产环境构建脚本；
1.2 check-version.js — 检查npm，nodejs版本；
1.3 utils.js — 构建相关工具方法；
1.4 vue-loader.conf.js — 配置了css加载以及编译css后自动添加前缀；
1.5 webpack.base.conf.js —webpack基本配置；
1.6 webpack.dev.conf.js — webpack开发环境配置；
1.7 webpack.prod.conf.js —webpack生产环境配置；
2. config ：项目配置
2.1 dev.env.js —开发环境变量
2.2 index.js —项目配置文件
2.3 prod.env.js —生产环境变量
3.node_modules：npm 加载的项目依赖模块
4.src：开发目录
4.1 assets：资源目录，放置一些图片或者公共js，公共css。这里的资源会被webpack构建；
4.2 components:组件目录，写的组件放在这个目录
4.3 router：前端路由，需要配置的路由路径写在index.js里面；
4.4 App.vue : 跟组件
4.5 main.js ：入口js文件
5.static： 静态资源目录，如图片，字体等，不会被webpack构建
6.babelrc：babel编译参数
7.editorconfig：代码格式
8.gitgnore：git上传需要忽略的文件配置
9.postcssrc.js ：转换css的工具
10.index.html ：首页入口文件，可以添加一些meta信息等
11.package.json ：npm包配置文件，定义了项目的npm脚本，依赖包等信息
12.README.md : 项目的说明文档，markdown格式
1.8 在config -> index.js 下面
port：修改端口号
autoOpenBrowser：启动项目是否自动在浏览器打开.
1.9 安装Element-UI 框架
在文件夹中 -> npm install element-ui -S
在项目文件夹的main.js文件中引入
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)
1.10 安装sass
npm install —save-dev css-loader
npm install —save-dev sass-loader
npm install —save-dev style-loader
//sass-loader依赖于node-sass
npm install —save-dev node-sass
———

* 如果报错：
TypeError: this.getResolve is not a function
原因：安装的sass-loader的版本为最新8.0.0，查看网上资料说是版本过高导致编译错误
解决方法：
把项目package.json文件中sass-loader版本改为7.3.1。执行命令，重新安装项目依赖：
npm install
然后启动项目： npm run dev
1.11 配置本地代码
在config—index.js 文件对proxyTable进行配置
配置完成后需要npm run dev重启一下项目
proxyTable: {
‘/api’: { // 配置后台代理
target: ‘http://192.168.37.56:8090‘,
secure: false,
pathRewrite: {
‘^/api’: ‘’
},
changeOrigin: true
},
“/socket”: { // 配置webSocket
target: ‘http://192.168.37.56:8090‘,
secure: false,
pathRewrite: {
‘^/socket’: ‘’
},
changeOrigin: true,
ws: true
},
},

说明：
target：本地测试环境请求后台接口的域名ip
secure：https需要配置的参数
pathRewrite：代替targe里面的地址，比如我们
需要调用”http:192.168.37.56:8090/user/add”接口，
我们可以直接写成”/api/user/add”
changeOrigin：接口跨域需要配置的参数
1.12 config /index.js 配置参数的详细解析
‘use strict’
const path = require(‘path’)
module.exports = {
// 开发环境
dev: {
assetsSubDirectory: ‘static’, // 编译输出的二级目录
assetsPublicPath: ‘/‘, // 编译发布的根目录，可配置为资源服务器域名或CDN域名
proxyTable: {}, // 配置后台代理
host: ‘localhost’, // 运行测试页面的域名ip
port: 8080, // 运行测试页面的端口
autoOpenBrowser: false, // 项目运行时是否自动打开浏览器
errorOverlay: true, // 浏览器错误提示
notifyOnErrors: true, // 跨平台错误提示
poll: false, // 使用文件系统获取文件改动的通知devServer.watchOptions
devtool: ‘cheap-module-eval-source-map’, // 增加调试，该属性为原始源代码
cacheBusting: true, // 使缓存失效
cssSourceMap: true // 代码压缩后bug定位将非常困难，引入SourceMap记录压缩前后的位置信息记录，当产生错误时直接定位到压缩前的位置
},
// 生产环境
build: {
index: path.resolve(dirname, ‘../dist/index.html’), // 编译输入的index.html文件
assetsRoot: path.resolve(dirname, ‘../dist’), // 编译输出的静态资源路径（项目打包时的文件）
assetsSubDirectory: ‘static’, // 编译输出的二级目录
assetsPublicPath: ‘/‘, // 编译发布的根目录，可配置为资源服务器域名或CDN域名
productionSourceMap: true, // 是否开启cssSourceMap
devtool: ‘#source-map’, // 增加调试，该属性为原始源代码
productionGzip: false, // 是否开启gzip
productionGzipExtensions: [‘js’, ‘css’], // 需要使用gzip压缩文件的扩展名
bundleAnalyzerReport: process.env.npm_config_report // 打包分析
}
}
1.13 axios 的封装
npm install axios —save-dev
在项目的src目录下新建一个servieces文件夹，然后在里面新建一个
ajax.js和一个getData.js文件。ajax.js文件夹用来封装我们的axios，getData.js用来
统一管理我们的接口。
统一管理我们的接口。