Vue-Cli 学习整理

坚果

程序猿/艺术

关注他

21 人赞同了该文章

1. vue-cli(vue脚手架)全集
- 1.1. vue-cli2脚手架
  - 1.1.1. nodejs/npm环境安装
  - 1.1.2. vue-cli2安装
  - 1.1.3. 创建vue-cli项目
  - 1.1.4. 自定义首页
  - 1.1.5. router实现页面跳转
  - 1.1.6. router实现子路由1
- 1.2. router实现子路由2
  - 1.2.1. 为什么不使用#号
  - 1.2.2. 单独安装 eslint
  - 1.2.3. 导入其他项目添加依赖并运行
  - 1.2.4. 居中如何实现（主组件的样式设置）
  - 1.2.5. 小结

- 1.3. vue-cli3
  - 1.3.1. 手动搭建vue-cli环境
  - 1.3.2. 卸载vue-cli2，并安装vue-cli3
  - 1.3.3. vue-cli3图形界面
  - 1.3.4. vue-cli3创建项目
  - 1.3.5. 项目目录结构
  - 1.3.6. vue-cli3导入其他项目
  - 1.3.7. vue-cli3创建新项目案例
  - 1.3.8. 嵌套路由
  - 1.3.9. vue-cli3添加样式的三种方式
- 1.4. vue-cli3项目案例需求分析
  - 1.4.1. 页面初始化
  - 1.4.2. 实现左边固定导航栏，右边页面随不同导航变化
  - 1.4.3. 扩展右侧导航栏
  - 1.4.4. axios 处理json数据
  - 1.4.5. 多个导航功能实现
  - 1.4.6. 解决刷新以及初始化显示的问题
  - 1.4.7. vue-cli3小结

资料来源于慕课网视频学习，较基础和仔细，整理为文档！

1. vue-cli(vue脚手架)全集

1.1. vue-cli2脚手架

1.1.1. nodejs/npm环境安装

常用dos命令：
- cd 打开文件夹、md创建新文件夹、dir 查看文件夹内容、cd .. 返回上一级文件夹、cls清屏

1.1.2. vue-cli2安装

npm(node package manager)是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
cnpm 因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以淘宝团队分享了使用国内镜像来代替国外服务器
参数
- -g 参数，全局安装
- -S, --save安装包信息将加入到dependencie(生产阶段的依赖)
- -D, --save --dev 安装包信息将加入到devDependencie(开发阶段的依赖)
- i, 是 install 的缩写（前面没有 -）
- -gd/-gD/-g -d，综合上面两个参数，将开发华环境和生成环境都加进来
- npm root -g,查看全局安装的位置
npm install -g cnpm --registrys=https://registry.npm.taobao.org
为了避免每次安装都需要 --registry参数，可以使用如下命令进行永久设置
- npm config set registry https://registry.npm.taobao.org

安装 cnpm install -gd vue-cli，使用 vue -V，版本号为2.9.6

1.1.3. 创建vue-cli项目

语法：vue init webpack projectName，这里使用的是webpack,projectName是工程名，注意工程名字一般小写
创建过程的配置
- 是否安装vue-router，要安装
- 是否使用ESLint管理代码，代码风格管理工具，用来统一代码，不是项目的话，可以选择n
- 其他默认
进入D盘，md vuecli/ cd vuecli
初始化，vue init webpack test1，test1是子文件夹名字，如果初始化失败，重新安装
- 初始化后生成的目录主要有 build/config/node_modules/src
- src下包括有 assets/components/router/App.vue/main.js

按照系统提示
- cd test1
- npm run dev
然后就会进入 8080 本地界面

1.1.4. 自定义首页

在components组件文件夹创建 first.vue
编写代码：

<template><div>first.vue</div>
</template>

进入router文件夹下的 index.js，用来控制页面路由，添加代码，
- 首先引入 import First from '@/components/first'
- 然后重新执行，npm run dev

1.1.5. router实现页面跳转

在首页，可以通过链接进入a,b两个“页面”，其实是进入components中的vue页面
修改 first.vue

<template><div><router-link to="">转向A</router-link><router-link to="">转向B</router-link></div>
</template>

新创建两个components下的vue文件 A.vue/B.vue

<template><div><p>我是A/B页面</p><p><router-link to="/">返回</router-link></p>  //这里直接返回根目录</div>
</template>

在index.js中引入

import A from '@/components/A
import B from '@/components/Bexport default new Router({export default new Router({routes: [{path: '/',//name: 'HelloWorld',//component: HelloWorldname: 'First',component: First},{path: '/a',  //定义路径名字component: A},{path: '/b',  //定义路径名字component: B}]
})
})

进入跳转的页面 first.vue
在to后面添加路径名字，"/a"，"/b"

1.1.6. router实现子路由1

实现嵌套路由的效果：children:[{},{}]
实现多层路由
创建A1.vue作为A的子路由

<template><div><p>我是A1页面</p><p><router-link to="/a">返回上一级<router-link></p><p><router-link to="/">返回首页</router-link></p></div>
</template>

首先引入：import A1 from '@/components/A1
作为子路由：

export default new Router({export default new Router({routes: [{path: '/',//name: 'HelloWorld',//component: HelloWorldname: 'First',component: First},{path: '/a',  //定义路径名字component: A,children: [{path:'/A1',component: A1}]},{path: '/b',  //定义路径名字component: B}]
})
})

在A.vue中添加 <p><router-link to:"/A1">转向A1</router-link></p>
这时候还不能进入到子路由A1页面，需要将路由挂载进来，在A.vue中添加<router-view></router-view>
- 但这里会将原来A.vue页面的元素也显示出来，也就是父子页面同时显示，可以应用于某些固定的导航栏页面跳转

1.2. router实现子路由2

上一个子路由是父子的关系，这里要使用平级的功能
只要将上一部分的children去掉，并将里面的内容提取到平级的部分

{path: '/a',  //定义路径名字component: A,
},
{path:'/A1',component: A1
}

1.2.1. 为什么不使用#号

路由两种显示模式
- hash模式：地址栏包括#符号，且#后面的不被后台获取
- history模式：具有对url历史记录进行修改的功能（使用较多）
在微信支付，分享url作为参数传递时，#不能满足需求
history需要后台配合，处理404问题
去掉#符号，在index.js文件中修改

export default new Router({mode: 'history',   //这里添加 history的模式routes: [{...

1.2.2. 单独安装 eslint

npm i eslint -S/--save （安装到本地目录，也就是该工程目录下）
所有安装好的在package.json文件的dependencies下（或者devDependencies）下都会有相应的添加的项
eslint是规范检查，应该在开发环境中，生产环境中已经不太需要
那我们首先卸载 npm uninstall eslint
再重新安装到 dev 下，npm i eslint -D，这样就安装到devDependencies，也就是开发环境下。
- 不能使用 npm i eslint --dev，这样还是安装到生产环境，使用 npm i eslint --save-dev
- 可以使用 -D/--save-dev 安装到开发环境，缺一不可

1.2.3. 导入其他项目添加依赖并运行

怎样导入vue-cli项目
进入工程文件夹，npm install 安装相关依赖，部署配置环境，前提是vue和npm都安装
npm run dev 开始运行

1.2.4. 居中如何实现（主组件的样式设置）

主页面的V logo 是怎么设置的？
在 App.vue 的style样式设置中

1.2.5. 小结

学习了vuecli基本的文档结构，掌握了页面跳转的基本方法
基本的安装和卸载

1.3. vue-cli3

1.3.1. 手动搭建vue-cli环境

步骤
安装依赖 npm install/ cnpm install
初始化 npm init -f/ cnpm init -f
安装组件，并查看安装后的内容
具体流程如下：
创建文件夹
进入文件夹，安装依赖 npm install
初始化 npm init -f，会生成 package.json 的文件
安装router到开发环境，npn i vue-router -D/--save-dve，就会新增一个 node_modules 的文件夹
- 如果是全局安装，会安装到nodejs文件夹中的 node_modules文件夹
cd no*，进入到以 no 开头的文件夹

1.3.2. 卸载vue-cli2，并安装vue-cli3

重新打开一个控制台，运行 npm uni/uninstall vue-cli -g
如果运行 vue -V 仍能查找到版本号，则使用 cnpm 再卸载一次
安装vue-cli3
普通安装：npm install -g @vue/cli
淘宝镜像：cnpm install -g @vue/cli

1.3.3. vue-cli3图形界面

在控制台输入 vue ui，便可以进入ui界面

1.3.4. vue-cli3创建项目

首先创建新的文件夹，md test3，然后进入 cd test3
创建新的工程 vue create test3
用上下键来选择 default(babel,eslint)或者(Manually select features)
我们选择后面的一项，然后可以进入选择更多的插件
用上下键选择到某一个项，然后按空格键选择，去掉Linter（这里的eslint规范，初期先不加进去，不然会有很多格式的报错），选择后回车
选择history mode for router为 yes
placing config for Babel,ESLint,etc,选择 package.json，这里需要按方向键调整
回车到开始安装
安装结束后，系统系统， cd test3, npm run serve
App running at:
Local: http://localhost:8080/
Network: http://172.31.226.37:8080/
上面是localhost
下面是本机配置的局域网IP地址

1.3.5. 项目目录结构

vue-cli3和vue-cli2有较大区别
主要源程序还是在 src目录结构下， src下的components主要存放组件，views下主要存放视图

1.3.6. vue-cli3导入其他项目

先进入原来的test1工程的文件夹下
安装依赖 npm install
启动 npm run serve，会出现错误
运行 npm run dev，可以正常运行

1.3.7. vue-cli3创建新项目案例

进入 test3/test3
启动 npm run serve
开始修改项目
先在 components文件夹下创建新的组件 first.vue

<template><div><router-link to="">转向A组件/页面></router-link><router-link to="">转向B组件/页面></router-link></div>
</template>

在router 文件夹下的index.js中导入并使用

import First from '../components/first.vue'const routes = [{path: '/',//name: 'home',component: First},... //省略部分代码
]

要注意注释掉原来 Home 的路由
在components文件夹下添加要跳转的 A、B组件

<template><div>AAAAAAAAAAAAA<router-link to="/">返回主页</router-link>  //router-link在div标签中</div>
</template>

按照上面同样的方法在 index.js 中导入并使用

import A from '../components/A.vue'
const routes = [{path: '/a',  //要修改这里的 path//name: 'home',component: A},... //省略部分代码
]

原来的first.vue中添加跳转的路径

<template><div><router-link to="/a">转向A组件/页面></router-link><router-link to="/b">转向B组件/页面></router-link></div>
</template>

1.3.8. 嵌套路由

首先找到要嵌套的页面，这里是在首页，修改router下index.js的内容
在First首页路由中添加 children项，然后把 A，B两个路由项剪切过来

const routes = [{path: '/',  //要修改这里的 path//name: 'first',component: First,children: [{path: '/a',  //要修改这里的 path//name: 'home',component: A},{path: '/b',  //要修改这里的 path//name: 'home',component: B}]},... //省略部分代码
]

修改主页first.vue中的内容，凡是作为不跳转的页面，都需要设置一个挂载点
添加

<template><div><router-link to="/a">转向A组件/页面></router-link><router-link to="/b">转向B组件/页面></router-link><router-view></router-view></div>
</template>

1.3.9. vue-cli3添加样式的三种方式

直接在组件页面中添加<style>--内部样式表
使用外部样式表，在public文件夹中创建样式文件ys1.css
在first.vue文件中导入，替换原来内部样式表的部分，为 @import "路径名"

1.4. vue-cli3项目案例需求分析

主要使用技术
组件及组件间传值
axios实现读取json数据：商品的数据源存放于json中
css相关技术进行布局：布局、间距等样式
使用views页面级组件，使用router设置页面
在testcli文件夹下创建新的工程 proj，vue create proj

1.4.1. 页面初始化

将img文件夹放在public文件夹下，需要的图片素材放在img中
项目结构
components文件夹放一些小组件
将小组件组合起来最终是用view文件夹中的页面去呈现
兄弟组件间传值可以使用 事件总线
在assets/components文件夹下创建事件总线
创建名为 msg.vue 的事件总线文件，代码如下：

import Vue from 'vue'
export default new Vue
// 当做是公共的来做参数传递

在要放置各个组件的主页面First.vue中，导入各个组件，在末尾添加script标签

<script type="text/javascript">import Left from '../components/Left.vue'import Right from '../components/Right.vue'export default {components: {Left,Right}}
</script>

然后在 First.vue页面的适当位置使用<Left>/<Right>标签插入相关的组件

1.4.2. 实现左边固定导航栏，右边页面随不同导航变化

因为左侧有多个导航菜单键，右边只有一个页面去显示变化，所以要实现 组件复用 的功能。
首先给左边导航的li添加事件，<li @click="menu1">服饰</li><li @click="menu2">家电</li>
然后在Left.vue文件下面写上 script 脚本

<script type="text/javascript">import Msg from './msg.vue'export default {methods: {menu1:function() {Msg.$emit("val","1");  //通过 emit 触发 Msg的on事件，将1的值赋给val，触发到on},menu2:function() {Msg.$emit("val","2");  //通过 emit 触发 Msg的on事件，将1的值赋给val，触发到on}}}
</script>

vue文件中如果要添加脚本，script放在最后，其中 export default{} 是必须要写的，不然没法显示出来。
在 Right.vue 文件中去接受相应的值

<template><div>{{kk}}</div>
</template>
<script type="text/javascript">
import Msg from './msg.vue'  //左右vue文件都要引入这个事件总线的代码
export default {data() {return {kk: 0}},mouted: function() {var _this = this;  //右边的this代表当前vue本身，也就是 kk 的数据，左边是this的副本Msg.$on('val',function(m){this.kk = m;   //错误，这里this表示的是 on 事件中的内容，不再是当前vue，所以找不到 kk，所以使用 _this_this.kk = m;})     //使用 on 来接收，val是另一个文件传过来的值，接受的值传给 m}
}
</script>

这里有个坑：事件总线这里命令为 Msg.vue，但其实应该命名为 Msg.js，所以任何引用到该文件的地方都需要修改为 Msg.js

1.4.3. 扩展右侧导航栏

原来只有一个页面的显示，这里重新修改扩展右侧导航栏

<template><div><div v-if="kk==1">1111111111111</div><div v-if="kk==2">2222222222222</div><div v-if="kk==3">3333333333333</div><div v-if="kk==4">4444444444444</div></div>
</template>
<script type="text/javascript">
... 同上
</script>

1.4.4. axios 处理json数据

安装命令 npm i axios -S，这样就安装到生产环境中去了
然后在 main.js 中来引用 import axios from 'axios'
并全局注册该插件，还是在 main.js 文件中， Vue.prototype.$http = axios，这样以后要使用该插件，就是使用 $http，也可以命名为 $axios
然后在 Right.vue 中开始使用。
首先准备 json 数据，可以在public文件夹下新建 json 文件夹，新建bjb.json，存放数据如下：

[{"goodName": "联想1","img": "img/bjb1.jpg"},{"goodName": "联想2","img": "img/bjb2.jpg"},{"goodName": "联想3","img": "img/bjb3.jpg"},
]

在components文件夹下面创建 goodsList.vue

<template><div name="show"><ul><li v-for="goods in list"><img v-bind:src="goods.img">   //要把json中的数据存放到 list 中 <p>{{good.goodName}}</p>    //img和goodName是json数据中的键的名字</li> </ul></div>
</template>
<script>export default {name: "show",data() {var obj = this;this.$http.get("json/bjb.json").then(function(res){obj.list = res.data;  // 这里的 list 是上面 v-for 中的list})    // $http 是上面注册好的return {list: []}}}
</script>

goodsList.vue需要在Right.vue中使用，所以在 Right.vue 中编写相关的代码
首先导入相关文件 import GoodList from './goodList.vue'
然后进行组件的注册，在export default中新增一项 javascript components: [ GoodList ]
使用 <GoodList> 替换原来的 11111111111/22222222222等
然后在 goodList.vue文件中，添加相应的样式来使得页面正常显示

1.4.5. 多个导航功能实现

上一次中，Right.vue是父组件，goodsList.vue是子组件，这里先来实现父子组件的传值
在 Right.vue 中添加代码
<GoodList :goodId="1"></GoodList> //在调用 GoodList 的时候，会传递参数 goodId，值为 1
在goodsList中接收
在export default中添加一项

props: {goodId: Number
}
watch: {   //watch 监听父组件到子组件传值的参数,goodId值发生改变，就会被 watch 捕捉到goodId() {var obj = this;var url = "";if( obj.goodId == 1) {  // 表示单击的是第一项url = "json/bjb.json"} else if(obj.goodId == 2) {url = "json/shouji.json"   //根据点击导航栏菜单的不同，选择不同的json文件}this.$http.get(url).then(function(res){  //这里的get就是用变量的写法，url的值传给 resobj.list = res.data;})return {list: []}}
}

同时要修改上面 data() 部分的代码，增加判断语句然后给 url 赋予不同的 json 数据

1.4.6. 解决刷新以及初始化显示的问题

上面需要点击导航栏的菜单项才会显示出来，这里给它添加一个默认显示的项
只需要在上面的 data 和 watch 函数中添加一个 else

watch: {   //watch 监听父组件到子组件传值的参数,goodId值发生改变，就会被 watch 捕捉到goodId() {var obj = this;var url = "";if( obj.goodId == 1) {  // 表示单击的是第一项url = "json/bjb.json"} else if(obj.goodId == 2) {url = "json/shouji.json"   //根据点击导航栏菜单的不同，选择不同的json文件} else {  // 上面 goodId==0 就通过这里处理url = "json/bji.json"   //这里可以显示默认的页面  }this.$http.get(url).then(function(res){  //这里的get就是用变量的写法，url的值传给 resobj.list = res.data;})return {list: []}}
}

然后修改 Right.vue 文件

<template><div><div v-if="kk==1"><GoodList :goodId="1"> </GoodList></div><div v-else-if="kk==2"><GoodList :goodId="2"> </GoodList></div><div v-else-if="kk==3">3333333333333</div><div v-else-if="kk==4">4444444444444</div><div v-else>   //除了以上之外，才是下面0的显示<GoodList :goodId="0"></GoodList></div></div>
</template>
<script type="text/javascript">
... 同上
</script>

1.4.7. vue-cli3小结

vue-cli2/vue-cli3安装，卸载，相关插件的安装，卸载。
实现页面路由、路由嵌套、插件安装

Vue-Cli 学习整理【转载】相关推荐

Vue学习笔记（3）（Vue CLI）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili Vue CLI 0. 什么是vue-cli 如果你在开发大型项目, ...
Vue学习笔记(九) Vue CLI
1.简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,它包括三个独立的部分: CLI:一个全局安装的 npm 包,提供在终端里使用的命令 CLI 服务:一个局部安装在使用了 @v ...
Vue.js 学习笔记十二：Vue CLI 之创建一个项目
目录创建一个项目创建一个项目运行以下命令来创建一个新项目: vue create vuecli-demo 你会被提示选取一个 preset.你可以选默认的包含了基本的 Babel + ESLin ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
vue cli 4 多环境_Vue 笔记整理19
19.1 vue-cli起步 19.1.1 什么是vue-cli Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: - 通过 @vue/cli 搭建交互式的项目脚手架. - 通 ...
Vue学习（十一）Vue CLI脚手架
文章目录初始化脚手架说明步骤 Vue 脚手架创建项目文件说明 render函数脚手架中不同版本的Vue 脚手架启动注意 vue.config.js配置文件初始化脚手架说明 Vue脚手架是V ...
VUE学习-脚手架vue cli（六）
一.脚手架vue cli 官网文档:https://cli.vuejs.org/zh/guide/ A)安装vue/cli 1.使用以下命令安装: npm install -g @vue/cli # ...
VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
体验 vue cli 3.0
vue cli 3x 发布已经有好长一段时间了,webpack 4x 现在版本已经到了 4.28.0:如果你现在用或者不用手脚架搭建项目,我都推荐你使用 webpack 4x,体验一把新技术带来的变化 ...

Vue-Cli 学习整理【转载】

Vue-Cli 学习整理

1. vue-cli(vue脚手架)全集

1.1. vue-cli2脚手架

1.1.1. nodejs/npm环境安装

1.1.2. vue-cli2安装

1.1.3. 创建vue-cli项目

1.1.4. 自定义首页

1.1.5. router实现页面跳转

1.1.6. router实现子路由1

1.2. router实现子路由2

1.2.1. 为什么不使用#号

1.2.2. 单独安装 eslint

1.2.3. 导入其他项目添加依赖并运行

1.2.4. 居中如何实现（主组件的样式设置）

1.2.5. 小结

1.3. vue-cli3

1.3.1. 手动搭建vue-cli环境

1.3.2. 卸载vue-cli2，并安装vue-cli3

1.3.3. vue-cli3图形界面

1.3.4. vue-cli3创建项目

1.3.5. 项目目录结构

1.3.6. vue-cli3导入其他项目

1.3.7. vue-cli3创建新项目案例

1.3.8. 嵌套路由

1.3.9. vue-cli3添加样式的三种方式

1.4. vue-cli3项目案例需求分析

1.4.1. 页面初始化

1.4.2. 实现左边固定导航栏，右边页面随不同导航变化

1.4.3. 扩展右侧导航栏

1.4.4. axios 处理json数据

1.4.5. 多个导航功能实现

1.4.6. 解决刷新以及初始化显示的问题

1.4.7. vue-cli3小结

Vue-Cli 学习整理【转载】相关推荐

最新文章

热门文章