Vue学习基础课程01（@vue/cli）—2018年10月10日

使用脚手架 @vue/cli

可能存在的无法问题

比如你的npm无法使用，很尴尬

改国内镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org可以快速的实现插件安装

可以查看的命令

下面是 vue 的常用命令

安装

node版本选哦8.9或更高的

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

通过 vue -V 查看版本，上面有个 vue -h命令类似

你如果喜欢界面ui模式可以选择 vue ui

当然个人喜欢可以使用命令操作

• vue create hello-world 创建一个新项目

一般选择默认，当然你可以自己选择定义的内容，并且保存为需要的模板，后面你在使用的create会为你显示

• 下面这个是选择是否保存路径的路由访问的历史，一般选择yes

• 提示你是否使用淘宝镜像

• 成功后需要cd 到目录下，并且运行npm run serve来启动服务

• 注意我么在路由中的输入是小写的，

  import Vue from 'vue'
  import Router from 'vue-router'
  import Home from './views/Home.vue'
复制代码

---

配置文件 vue.config.js 配置文件信息，在项目的根目录下

比如配置，会自动读取这个文件，固定名称

    const goods = require('./data/goods.json');
const ratings = require('./data/ratings.json');
const seller = require('./data/seller.json');

module.exports = {
	baseUrl: '', // 根路径
	outputDir: 'dist',   // 构建输出目录 npm run build 
	assetsDir: 'assets', // 静态资源目录(js, css ,img, fonts)
	lintOnSave: false, // 是否开启eslint保存检测 ，有效值： true | false | error 
	devServer: {
		open: true,  // 启动服务自定打开浏览器
		host: "localhost", // 本地主机命，可以是127.0.0.1 | localhost
		port: 8080, // 端口好设置
		https: false, // 开启https,会开启验证。默认false
		hotOnly: false, // 热更新操作,webpack 已经有了
		proxy: {
			// 配置跨域
			'/api': {
				target: "http//localhost:5000/api",
				ws: true, // 跨越
				changOrigin: true,// 开启代理
				pathRewrite: {
					'^/api': ''
				}

			}
		},
		before(app) {
			// http://localhost:8080/api/goods
			app.get("/api/goods", (req, res) => {
				res.json(goods)
			});
			app.get("/api/ratings", (req, res) => {
				res.json(ratings)
			});
			app.get("/api/seller", (req, res) => {
				res.json(seller)
			});
		}
	}
}    

复制代码