VUE-CLI学习
VUE-CLI学习
vue CLI安装 与 新建模板
vue -V
vue help
vue help [cmd]
安装CLI
npm install -g vue-cli[@2.9.6]
用法：
vue init
例如：
vue init webpack myweb
更多Vue模板
执行以上命令结果如下：
Project name myweb // 项目名称
Project description A Vue.js project //项目描述
Author //作者
Vue build standalone //vue使用安装编译插件 选择带包含compiler的选项
Install vue-router? Yes // 是否安装路由 这 Yes
Use ESLint to lint your code? No //ES6语法，No
Set up unit tests No //测试,NO
Setup e2e tests with Nightwatch? No
Should we run `npm install` for you after the project has been created? (recommended) npm
等待初始化项目…
# Project initialization finished!
# ========================
To get started:
cd myweb
npm run dev
显示如上内容，安装成功！
cd myweb
进入项目这不执行 npm run dev命令。
这里介绍 两个 运行项目的 命令：
npm run dev //开发时使用的
npm run build //项目发布时使用
package.json基本介绍
我们进入myweb根目录打开文件 package.json
下面是文件中的部分内容：
{
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
}
}
scripts对象：
devstart对应npm run devdev 和 start 使用效果是一样的。根据你的个人习惯选择命令即可。build对应npm run build命令，发布时打包时用到
dependencies 工程依赖对象下,现在有两个依赖：
vue webpack模板老 2.5.2版本版本较低，我们更新下。
如上图最新稳定版是2.5.18
更新后的代码如下：
"dependencies": {
"vue": "2.5.18",
"vue-router": "^3.0.1"
}
建议去掉 ^ 精确使用版本号。
命令的使用
npm run dev 运行项目
我们已经了解命令的作用，键入命令运行下项目：
进入 项目目录
cd myweb
npm run dev
结果如下：
C:\Users\mabh\myweb>npm run dev
> [email protected] dev C:\Users\mabh\myweb
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
DONE Compiled successfully in 7078ms 15:51:13
I Your application is running here: http://localhost:8080
编译我们所有组件、文件、生成临时的web包。
由于内置了 web Server，我们可以直接通过 给的地址直接访问即可：http://localhost:8080
注意：npm start 不用带 run, dev 和 build都需要加上 run。这是他们的使用区别。
npm run build 发布项目
npm run build
结果如下：
C:\Users\mabh\myweb>npm run build
> [email protected] build C:\Users\mabh\myweb
> node build/build.js
Hash: 2830cfa3407a7dc731c2
Version: webpack 3.12.0
Time: 11133ms
Asset Size Chunks Chunk Names
static/js/vendor.76d5237ed1bbf9f3775e.js 113 kB 0 [emitted] vendor
static/js/app.eb58cdd175306f505211.js 11.6 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.30790115300ab27614ce176899523b62.css 432 bytes 1 [emitted] app
static/css/app.30790115300ab27614ce176899523b62.css.map 828 bytes [emitted]
static/js/vendor.76d5237ed1bbf9f3775e.js.map 560 kB 0 [emitted] vendor
static/js/app.eb58cdd175306f505211.js.map 22.2 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 507 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
编译完成后会 文件放在工程 dist 目录下。
为我们生成了 index.html 页面。 css 和 js 文件 都是被加密 。打开文件可以看到，可读性非常的差因为被混淆过了
引入 Bootstrap4
cd myweb
npm install bootstrap --save --save-exact
- **
-- save: **把bootstrap作为依赖库存到 package.json文件中。 - **
--save-exact：**精确版本号，也就是 删除了 ^
执行完后 package.json文件：
"dependencies": {
"bootstrap": "4.1.3",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
编辑 main.js 是这个项目的入口文件
引入bootstrap 如下：
import bootstrap4 from 'bootstrap/dist/css/bootstrap.min.css'
编辑 App.vue template 节点
如下测试内容：
<template>
<div id="app">
<img src="./assets/logo.png">
<hr>
<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<hr>
<router-view/>
div>
template>
被hr标签包裹的内容是新的内容。为了测试bootstreap是否被正确引入。这些按钮是bootstreap的最基本写法。
使用 npm start运行下：
npm start
结果：
C:\Users\mabh\myweb>npm start
> [email protected] start C:\Users\mabh\myweb
> npm run dev
> [email protected] dev C:\Users\mabh\myweb
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
DONE Compiled successfully in 17477ms 16:32:23
I Your application is running here: http://localhost:8081
使用 如下命令 浏览下：
http://localhost:8081
https://bootstrap-vue.js.org/
使用 Ajax库-axios
官网地址:https://github.com/axios/axios
https://github.com/imcvampire/vue-axios
基于Promise的HTTP客户端，用于浏览器和node.js
特征
- 从浏览器生成XMLHttpRequests
- 从node.js发出http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防范XSRF
浏览器支持：
安装 axios 和 vue-axios
cd myweb
npm install --save --save-exact axios vue-axios
注册组件
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
编辑组件
src\components\HelloWorld.vue
<template>
<div class="hello">
<pre>{{ content }}pre>
div>
template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
content: ""
}
},
mounted(){
this.axios.post("http://api.komavideo.com/news/list").then((response) => {
this.content = response.data;
});
}
}
script>
<style scoped>
style>
运行
npm run dev
C:\Users\mabh\myweb>npm run dev
> [email protected] dev C:\Users\mabh\myweb
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
DONE Compiled successfully in 9885ms 17:13:27
I Your application is running here: http://localhost:8080
http://localhost:8080 打开运行看下吧，如下图：
自定义CSS样式
在如下 src\assets\my.css目录新建css文件
.myclass1{
color: red;
border: 1px solid blue;
}
编辑App.vue
在script中引入 css文件，注意文件路径是相对的
import './assets/my.css'
template节点中添加如下：
<div class="myclass1">这是自定义CSS样式div>
打开浏览器看下吧。你会发现已经发生了变化。
原因是因为 npm run dev 会自动编译自动重启。
组件的结构
组建文件夹
{myproject}/src/components/*
组件写法
- template: 组件 html内容
- script:组件js脚本（ES6）
- style: 组件css样式单
实战演习
{{ msg }}
// import ...
export default{ //ES6写法输出改组件
name:"Hello World",
data(){
return {
msg:"Welcome to Your Vue.js App"
}
}
}