vue-cli | 项目

常说的vue全家桶指的是：vue-cli、vue-router、vuex、vue-resource。

vue-cli

vue-cli是用来管理vue项目的工具，可以使用vue-cli快速创建项目，启动项目，编译项目等操作。

vue的单文件扩展名是vue文件，需要借助vue-loader才能正常解析。

vue-cli的安装：

如果之前安装过低版本的vue-cli，要先卸载，执行以下命令

然后安装

安装之后检查版本

接下来在文件夹的终端执行以下命令创建vue项目

命令之后会让我们选择预设，选默认的default就可以，Manually值手动自定义，然后选择npm管理包。

项目创建之后，cd进入项目后，npm run serve(cnpm run serve)运行项目，这样在浏览器中就可以看到效果了。

接下来在src目录下正常开发项目就可以了，src/main.js是入口页面。

设置为false用来阻止vue在启动时生成生产提示。dist目录下的文件，就是生产环境下的文件。

此指令为在项目完毕之后，打包时所用的指令。

项目结构及文件介绍。

1、public/index.html是浏览器访问的入口页面。

2、src目录下保存的是开发环境中的碎片化文件。

3、build文件夹是保存一些webpack的初始化配置。

4、node_modules是npm加载的项目依赖的模块。

5、src目录是我们要开发的目录，打开是这样的：

　　　　　　　　其中assets：用来放置图片和css（sass）文件。

　　　　　　　　components:用来放组件文件。

　　　　　　　　app.vue:是项目入口文件。

6、main.js是项目的核心文件。代码如下：

　　　　　　　　import Vue from ‘vue' （引入vue）

　　　　　　　　import App from ‘./App' （引入app.vue文件）

　　　　　　　　import router from ‘./router' （引入路由）

7、main.js中的一段代码（创建vue节点，也就是html模板，然后渲染（render）到指定的页面上）

1 new Vue({
2   render: h => h(App),
3 }).$mount('#app')

这段代码的意思是创建一个vue对象，然后挂载到指定的html页面上。这里的重点是：render:h=>h(app)这一段。

首先箭头函数是es6的写法，还原为es5是这样的：

1 //createElement就是h,一个形参，没有具体意义，可以随意改变书写
2 render:(function(createElement){
3     return createElement(App);
4 })

字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

8、package.json:在package.json中有eslintConfig 属性，修改ruls规则，允许项目中使用console.log()

1 "rules": {
2     "no-console":"off"
3 }

9、Vueconfig.js的配置：是vue项目中的配置页面，需要自己创建。config文件夹保存的是一些项目初始化的配置。

proxy代理

proxu代理是解决跨域访问数据的一种方法。由于同源策略（同域名，同端口，同协议）的影响，我们不能去随意的去访问别的不同源的文档。为了解决这种问题，就出现了proxy代理这种方法。流程就是在自己前端访问自己的后端，然后在通过自己的后端去访问你想要去访问的网址。

实现步骤：

1、先引入一个异步加载的模块axios,用它来去请求数据

2、在项目根目录中，自己创建config.js文件，在其中写入以下代码:

 1 module.exports = {
 2     devServer: {
 3         proxy:{
 4             "/api": {
 5                 target: "https://api.wyyijiaqin.com",
 6                 pathRewrite: { '^/api': '' },
 7                 changeOrigin: true,
 8             }
 9         }
10     }
11 }

3、那么在vue访问"/api"时，实际就是跨域访问"https://api.wyyijiaqin.com"了

 1 import axios from "axios";  //注：在使用axios时要导入该模块
 2 export default {
 3     methods:{
 4         fn(){
 5             axios.get("/api").then(res=>{
 6                 alert(res.data)
 7             })
 8         }
 9     }
10 };

alias别名
在使用vue-cli开发vue项目时，有时候由于项目的需求我们会创建许多的文件夹，一个套一个套了许多层，而我们在需要使用其中一个子文件时，就需要在访问路径时写很长的父文件名，
（比如你想访问一个a下的b中的c下的d中的e，你就得./a/b/c/d/e）,为了解决这种比较麻烦的写法，我们就可以使用alias别名。

具体实现代码：

 1 const path = require("path");    //别名代码
 2 function resolve(dir) {          //别名代码
 3     return path.join(__dirname, dir)    //别名代码
 4 }
 5
 6 module.exports = {
 7     devServer: {
 8         proxy: {
 9             "/api": {
10                 target: "https://www.bilibili.com",
11                 pathRewrite: { '^/api': '' },
12                 changeOrigin: true,
13             }
14         }
15     },
16     chainWebpack: config => {       //别名代码
17         config.resolve.alias        //别名代码
18             .set('abc', resolve('src/a/b/c'));  //别名代码 如果只改一个文件夹下的写一个就可以
19
20     }
21 }

然后在app.vue中导入你修改之后的"abc"即可

sass环境

然后在vue文件中：

也可以在js文件中使用 import 引入 scss 文件。



以上。