Vue-cli脚手架搭建:
拿到新电脑第一次配置环境要做的步骤(以前没有配置过环境):
安装npm命令:
1.去nodejs官网下载node.exe 官网地址:https://nodejs.org/zh-cn/
2. node-v8.9.4-x64.msi 右键---安装 纯英文目录!!!!!!!!!!!!!!!!!!!
3.一路 next 下一步即可 finish完成后 没有界面!!!
4.win+R 打开cmd 输入 npm回车 出来一堆英文 没有表示命令不存在 就表示安装成功
安装npm的镜像命令cnpm:
由于npm命令 下载是走的国外网站
某些时候会很慢 所以中国团队推出了一个"淘宝镜像" 号称国外网站上线的
十分钟之内 淘宝镜像同步上线 命令是cnpm npm命令怎么用 cnpm命令就怎么用
1.打开cmd 输入命令: npm install -g cnpm --registry=https://registry.npm.taobao.org
2.等进度走完没有出现一堆 error 表示安装成功
3.输入cnpm回车 出现一堆非 error的英文表示安装成功
安装Vue命令(脚手架命令的安装):
1.打开cmd 输入命令 npm/cnpm install vue-cli -g
这句话表示全局安装vue脚手架命令(vue命令)
2.开始走进度 等到进度走完 没有出现一堆error 表示安装成功
3.输入命令 vue -V 注意空格和大写 如果现实版本号 表示安装成功
4.vue命令安装成功!
以后每次新创建一个vue项目时要做的步骤:
1.在本地自己创建一个项目存放的文件夹
2.用cmd切换到这个目录:
切换命令: 1.先切换盘符 d: 2.cd 文件夹的路径 回车
3.输入命令 vue-init webpack 自己起一个英文的项目名称(名称纯小写英文开头的名字)
4.等待几吸的时间 开始调查问卷的方式 搭建项目
? Project name (myfirst) 当前项目的名称 括号为默认 直接回车表示选择默认
? Project description (A Vue.js project) 项目描述 直接回车
? Author 项目作者 直接回车
出现一堆英文 直接回车 Vue build standalone
? Install vue-router? (Y/n) 是否安装 vue-router 输入Y 回车 必须安装
? Use ESLint to lint your code? (Y/n) 严格模式的格式检查 不安装 输入n回车
? Set up unit tests (Y/n) 是否安装单元测试 输入n回车
? Setup e2e tests with Nightwatch? (Y/n) 是否安装端对端测试 不安装 输入n回车
Yes, use NPM 使用npm自动安装依赖(第三方库)
> Yes, use Yarn 使用yarn 自动安装依赖
No, I will handle that myself 我自己手动操作
这一步骤 可以上下按键进行选择 我们一般选择第一个 但是npm太慢 所以选择第三个 回车
To get started:
cd myfirst
npm install (or if using yarn: yarn)
npm run dev
5.按照提示 cd 到指定路径( cd myfirst)
6.cnpm/npm install 回车
7.没有出现一堆error表示依赖下载成功!
8.输入命令 npm run dev 回车 启动vue项目
脚手架项目目录介绍
build文件夹:
构建项目的文件夹 里面的文件都是配置当前项目构建的一些信息
暂时我们还不用操作
config文件夹:
做项目配置的文件夹 比如 启动的地址 不要localhost 端口改成其他
都可以在这里面改 以后我们会稍微涉及
node_modules文件夹:
就是我们cnpm/npm install 下载的所有模块
src文件夹:
这个就是我们今后写代码主要的文件夹
src文件夹里面的东西:
assets
静态资源文件夹:
音频 视频 图片等一些静态资源
components:
存放所有组件.vue文件的文件夹
router:
存放路由配置的文件夹
App.vue文件:
是默认自带的 入口欢迎页的组件
main.js:
vue程序的入口文件 vue项目从这里开始加载
static文件夹:
一个存放静态文件资源的文件夹 (打包时 并不会一起打包的文件夹)
比如: html css js文件 都可以存放到这
index.html:
单页面应用一个唯一的html 欢迎页的文件
package.json:
所有依赖的记录的配置文件
To get started:
cd myfirst
npm install (or if using yarn: yarn)
npm run dev
5.按照提示 cd 到指定路径( cd myfirst)
6.cnpm/npm install 回车
7.没有出现一堆error表示依赖下载成功!
8.输入命令 npm run dev 回车 启动vue项目
组件格式
1.在src文件夹里面 找一个地方(一般都是components文件夹) 新建一个后缀名是.vue的文件
文件名规范: 大驼峰的命名规范
2.vue文件里面包含最基本的三个标签 template标签 script标签 style标签
template标签 负责组件的html
script标签 组件的js
style标签 组件的css样式
3.编写号组件的html+css
4.在main.js的上面 写上 import语句 引入该组件
格式: import 组件对象名(自己取名 最好是大驼峰) from "组件vue文件的路径"
路径如果从当前文件夹向下去找 一般 是 ./开头
5.以上步骤只是完成了 相当于原来的 Vue.component方法的第二个参数的步骤
6.注册组件
注册为全局组件:
在main.js里面 调用Vue的静态方法
Vue.component("组件标签名",import进来的那个组件对象)
注册为局部组件:
在new Vue的大括号里面 定义components:{
标签名:组件对象(import引入的那个对象)
}
<template>
<div>
<h1 @click="show">{{msg}}</h1>
<ul>
<li v-for="(item,index) in arr" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script>
// 这个表示组件数据对外暴露 必须有!!!! 否则外部无法引入组件并且无法使用组件数据
export default {
// 组件的数据和事件在这里面定义
data(){
return{
msg:"我是hello组件",
arr:["快下课了","坚持一下","今晚至少写20遍"]
}
},
methods:{
show(){
alert("点我干嘛")
}
}
}
</script>
<style >
h1{
color:rgb(211, 15, 15);
}
ul{
list-style: none;
}
</style>
<style scoped> </script> 加一个scoped 这个sctyle中的样式只在当前页面显示
子组件的渲染步骤
1.创建vue文件 编写组件代码 html+css+js
2.这个新创建的vue组件想要成为谁的子组件 就在哪个组件的vue文件里面引入
import语句引入
3.在当前父组件的export default{
定义components:{
子组件标签:子组件对象
}
}
<template>
<div>
<h1 @click="show">{{msg}}</h1>
<ul>
<li v-for="(item,index) in arr" :key="index">{{item}}</li>
</ul>
<Child></Child>
</div>
</template>
<script>
// 引入子组件
import Child from "./Child"
// 这个表示组件数据对外暴露 必须有!!!! 否则外部无法引入组件并且无法使用组件数据
export default {
// 组件的数据和事件在这里面定义
data(){
return{
msg:"我是hello组件",
arr:["快下课了","坚持一下","今晚至少写20遍"]
}
},
methods:{
show(){
alert("点我干嘛")
}
},
components:{
// 注册子组件
Child,
}
}
</script>
<style >
h1{
color:rgb(211, 15, 15);
}
ul{
list-style: none;
}
</style>
vue-resource在vue-cli中的使用
1.在当前项目文件夹目录下 打开cmd或者vscode的终端
2.输入命令 cnpm/npm install vue-resource --save
--save 表示更新package.json里面的依赖库列表
3.在main.js里面 引入vue-resource模块
import VueResource from "vue-resource"
4.让vue全局可以使用vue-resource
// 如果引入模块 不写./ 默认去node_modules文件夹里面找到指定模块
import VueResource from "vue-resource"
Vue.use(VueResource); //把vue-resource 加载进vue里面 让q全局可以使用
axios在vue-cli脚手架中的使用
第一种引入方式:
1. 下载 vue-axios和axios模块
2.在main.js里面 最上面 通过import语句 引入这两个模块
import Axios from "axios"
import VueAxios from "vue-axios";
3.Vue.use(VueAxios,Axios) 通过Vue
这时候 在所有组件里面 都可以通过this.axios调用到axios模块
/*import Axios from "axios"
import VueAxios from "vue-axios";
Vue.use(VueAxios,Axios);*/
第二种引入方式:
1.下载axios模块
2.在main.js里面 import引入axios模块
3.将Axios模块 绑定给Vue原型
import Axios from "axios";
Vue.prototype.$axios=Axios;
然后再组件里面 通过 this.$axios({}) 这种方式调用
import Axios from "axios";
Vue.prototype.$axios=Axios;