开源代码
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
第一次会下载模版
-
输入项目名
-
输入项目描述
-
输入作者
- 选择Runtime类型
Runtime+编译器： 推荐（选此项）
Runtime-only： 轻量级 -
是否安装路由，推荐安装
-
是否安装增强语法提示
个人不建议安装，装完后各种警告红线，如果开启了，在项目中也可以手动关掉，关掉方法搜我之前发布过的文章
-
单元测试
-
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'
使用
<button class="btn btn-primary">确定</button>
<button class="btn btn-success">使用</button>
<button class="btn btn-danger">注意</button>
Ajax库
安装
npm install --save --save-exact axios vue-axios
引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
