Vue 学习笔记 (2.x 旧，不建议学）

开源代码

https://github.com/vuejs/vue-cli

创建项目过程已过时，新版支持可视化操作，直接使用vue ui即可

安装

通过vscode开发可以时间设计，代码分离，而且能在测试运行时实时刷新页面信息（只能代码更改时刷新），推荐大家
安装命令
npm install -g vue-cli

其他命令

版本
vue -V
帮助
vue -h

创建工程

使用第三方模版创建工程

使用vue help init可以查看提示如何初始化项目

使用vue list列出官方所有模版

模版的源码地址：
https://github.com/vuejs-templates

推荐使用热度最高的模版，相对稳定，网上相关模版讨论也更多一些

创建工程

这里假设创建test项目
vue init webpack test

第一次会下载模版

1. 输入项目名

   
   

2. 输入项目描述

   
   

3. 输入作者

   
   
4. 选择Runtime类型
   Runtime+编译器： 推荐（选此项）
   Runtime-only： 轻量级

5. 是否安装路由，推荐安装

   
   

6. 是否安装增强语法提示
   个人不建议安装，装完后各种警告红线，如果开启了，在项目中也可以手动关掉，关掉方法搜我之前发布过的文章

   
   

7. 单元测试

   
   

8. e2e测试

   
   
   
   

   9.选择npm
   使用vscode开发本身基于nodejs，所以倾向于这个选项

   
   

使用vscode开发

把test项目拖拽到vscode中

此时测试部分没有配置文件

添加配置

此时会让你选择环境，选择node.js

将测试项改为

• 启动后直接打开浏览器输入127.0.0.1:8080就可以查看，其中端口和超时可以自行配置，超时是safari浏览器测试不支持响应，预防测试结束。
• npm start 和 npm run dev功能相同，详见根目录下package.json中scripts属性，执行的是build/webpack.dev.conf.js项

{
            "type": "node",
            "request": "launch",
            "name": "启动测试",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "start"
            ],
            "port": 8080,
            "timeout": 99999999999999
        }

之后就可以运行这个测试了

别忘了设置个快捷键

看项目如何运行

虽然项目看起来很杂乱，但无非就两个作用，运行开发环境，和运行发布/生产环境

• 首先配置存储在package.json和config文件夹下js内
• 其次运行测试的对象是webpack.dev.conf.js，它会调用其他js和配置进行自动处理
• 打包是通过build.js调用webpack.prod.conf.js来处理.

打包

将打包配置写入调试配置

        {
            "type": "node",
            "request": "launch",
            "name": "发布打包",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run"
                ,"build"
            ]
        }

修正vscode中main.js报错问题

https://blog.jongallant.com/2019/02/vuejs-vetur-vscode-format-eslint-issues/

引用路径 import path

路径“./”

搜索当前目录下的同级目录

路径“@/”

这个路径在webpack.base.conf.js中配置，搜索‘@’可以看到对应的目录

'@/components/HelloWorld'是项目src/components/HelloWorld.vue文件

路径“直接写名称”

调用node_modules模块

Bootstrap样式

安装

npm install bootstrap --save --save-exact

--save 整合到package.json依赖库中
--save-exact 精确版本号

引用

import 'bootstrap/dist/css/bootstrap.min.css'

使用

确定
使用
注意

Ajax库

安装

npm install --save --save-exact axios vue-axios

引用

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);

使用

参考：https://www.bilibili.com/video/av24419291