简介

vue/cli是Vue的脚手架,是一个专门为单页面应用(单页面应用可以看成一个拥有多个页面的网站,你在开发文件夹中只能看见一个.html文件)快速搭建繁杂的脚手架。如果你使用过一些其他语言的框架(比如说Python的Django或flask,或爬虫框架scrapy等)这里的vue/cli就有些类似这样的框架,他会把一些代码框架在创建时就自动生成,便于开发的同时,让项目目录页变得相对规范。本博客由博主本人基于对官方文档的理解,会尽量使用能让小白理解的词语进行解释。

安装

安装nodejs

安装vue/cli我们需要配置一个node环境,node官网下载地址,安装和QQ类似,如果你不知道其中选项到底是干什么用的,就全程选择默认的即可(不要乱点,要是把环境点了取消,后面还要自己把PATH环境自己配一下,对小白来说很不友好)。安装好后我们在命令行中输入npm -v和node -v(-v用于查看版本,node一直在更新,你下的版本可能和我的不一样,不过不重要,只要不出现报错,红色的字体就没问题),出现正常版本号就代表你已经完成了node安装,可以正常使用了。

nvm

node版本非常多,如果你想安装多个版本(多版本并存),并且可以实时切换管理,你可以了解一下nvm(点击查看),nvm是一个专门下载node.js的包管理器
nvm 常用命令：

1. nvm install [version] ：安装指定版本的 node.js 。
2. nvm use [version] ：使用某个版本的 node 。
3. nvm list ：列出当前安装了哪些版本的 node 。
4. nvm uninstall [version] ：卸载指定版本的 node 。
5. nvm node_mirror [url] ：设置 nvm 的镜像。
6. nvm npm_mirror [url] ：设置 npm 的镜像。

npm换源

npm是nodejs中携带的一个包管理器,包管理器可以看成是一个应用市场,不过这个应用市场中应用都存在国外的服务器,导致在中国大部分地方下载速度比较缓慢,如果你对你的网络不是太自信,这里推荐换源,就是将这个应用市场下载应用从国外服务器变到国内的服务器上,可以大幅度加快下载速度。(下面推荐使用永久换源,并且只使用一种方法实现即可)

单次换源

在下方所有在调用npm时候在语句最后加入--registry=https://registry.npm.taobao.org即可(和原语句用空格隔开,不要连在一起)。

永久换源

方法一

下载cnpm(可以理解为将整个应用商店替换了,但是这两个应用商店里的应用是一样的)
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果使用方法一,下方所有你看到的npm都要换成cnpm。

方法二

替换下载源地址(可以理解为应用商店没变,但是应用商店中应用存储的位置从国外变到了国内了)
npm config set registry https://registry.npm.taobao.org
执行上述替换语句后我们可以在执行以下npm config list查看是否已经成功替换

如上图所示(红框处一样即可),则是换源成功,下面我们可以尝试使用。

Vue/cli安装

在确保你的node安装完成后执行下述语句(如果你不是照着我上方步骤安装的,也一定要确保你的node版本在8.9以上!)
npm install -g @vue/cli(如果你安装了cnpm则执行cnpm install -g @vue/cli)
其中npm是一个包管理器,可以理解为选择了一个应用市场并打开,install是打开这个应用市场的安装应用模块(除了安装还有卸载更新等模板),-g指的是全局安装(安装在电脑的一个指定的地方,让任意一个位置都可以调用)而@vue/cli则是我们安装的应用在这个应用商店里的名称。

创建Vue/cli项目

解决常见错误

我们先使用vue --version查看vue是否安装成功了,如果出现如下错误

这是因为windows的一项安全策略将我们的vue认为成了不安全的脚本,我们可以关闭此安全策略来解决这个问题
方法:

1. 使用管理员身份打开powershell(右键开始菜单里有)
2. 输入set-ExecutionPolicy RemoteSigned,然后在输入A即可
   

用命令行创建项目

1. 先cd到想要创建项目的目录中
2. 执行vue create [项目名称]创建项目 (项目名不能使用中文否则会报错)
   
3. 他会让我们选择一个预设,第一次使用,可以选择默认(default)。
4. 这里我选择了手动选择,分别介绍一下其中的用处(虽然这些东西懂的人一看就知道是啥,这里我就简单概括一下这些功能都是干什么用的,其中也有一些是我百度的,并附上了官网网址,想要具体了解可以去官网查看)
   
   1. Babel: 是一个js的编译器
   2. TypeScript: 是JavaScript类型的超集(微软做的开源项目)
   3. Progressive Web App(PWA): 渐进式网页应用(谷歌提出的标准,官方也是谷歌的网站,所以进入需要魔法)。PS:我也没用过这个,不过看介绍应该是一块可以把Web做的很像APP的一种方法,甚至可以在手机桌面上直接生成图片,有兴趣的可以深入了解了解。
   4. Router: Vue-Router,vue官方路由,我之前写过博客详细介绍,如果你想让你的项目中有多个页面,一定要把这个选上!
   5. Vuex: 官方介绍为状态管理工具。用白话文解释一下就是,这个工具用于存放一些公共变量(如果你有一个值(data)在多个页面中都会用到,你如果想要在页面中互相传值,将会即为麻烦)这时候,我们就可以将值保存在Vuex中,需要时候调用即可。
   6. CSS Pre-processors: CSS的预处理器(官网也在国外,打开也可能需要魔法),学过前端的应该都知道CSS上手很简单,但其实在做项目中,==调试CSS是一个很让人头大的事情,因为CSS只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。==所以CSS预处理器出现了,他让CSS有了一些编程语言的特性,赋予了的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。当前比较成熟的css预处理器主要有:Sass、LESS和Stylus。(当前博客主要介绍vue/cli,想要了解CSS预处理器的可以自行百度)
   7. Linter / Formatter: 这个指的就是ESLint,javascript代码检测工具。PS:个人理解是一个规范检查,检查你的js代码是否符合规范,应该类似与Python的PEP8规范一样。(如果我们有某行代码并没有遵守规范,但又不想看到报错提示可以在没有遵守规范哪行代码上使用// eslint-disable-next-line来关闭规范检查,只会生效一行!)
   8. Unit Testing与E2E Testing: Vue的自动测试模块,这俩我没找到官网。

上述功能按下空格是选择,选择完毕后在任意位置按下回车即可(我当前选择了Babel、Router、Vuex、Linter / Formatter)
一路回车后等待安装即可(最后两个选项为是否将此次设置保存成预设,可以根据情况而定)

创建好好,我么可以按照提示执行(先cd进入创建的目录),在输入npm run serve即可启动项目。

可视化界面创建

首先在命令行执行vue ui启动vue可视化界面,首次启动如下图

如果我们已经有创建好的项目可以使用可视化界面直接导入,如果没有可以进行创建。

1. 点击创建后,选择要存储的目录,点击下方的再次创建项目
2. 输入项目名称后剩下选择默认即可,然后进行下一步
   
3. 选择需要的预设(上面的命令行创建的时候我详细的介绍过预设,这里就不再做过多介绍了)
   
4. 创建好后,我们只需要点击左侧任务>server>运行即可。运行后点击下方启动app即可看到创建的页面。(ps:个人根偏向和喜欢使用可视化ui创建项目,vue的可视化做的很不错,功能很齐全,甚至在日常轻度使用中比命令行有过之而无不及,比如在电脑开机后想要打开已经建立好的项目,我们使用vue ui直接在命令行输入一句vue ui启动可视化页面后直接进行第四部即可启动,vue ui会自动进入我们之前的项目,但要是命令行,我们要先cd到项目目录,在从目录中启动。)

项目目录简介

1. node_modeules: 本地安装的包的的文件夹(我们下载的插件和依赖,比如我之前安装时候选项的预设中的router,vuex等都会保存在这个文件夹中)。此文件夹完全不需要手动修改
2. public: 项目出口文件(我们启动项目后,我们写的项目源码就会渲染到这里面的index.html页面中,但此页面无法直接打开!)。此文件夹几乎不需要手动修改
   
3. src: 项目源文件(我们写页面,路由等几乎所有操作都在此文件夹中完成)。使用vue-cli其他文件或文件夹都可以不了解,但此文件夹一定要完全了解!!!
   • assts: 资源文件(比如静态文件中的图片,字体等)
   • router: 路由文件(多个页面之间的相互跳转)
   • store: 状态管理(用于存放一些公共变量,方便多个页面调用)
   • views: 页面级组件文件(一个网站的一整个页面,一般views中的页面不会被复用)
   • components: 小组件文件(页面中的页首、页尾等类似这样会重复调用的组件属于小组件,如果你学过vue的自定义组件,这里的小组件就可以看成是自定义组件,小组件可以被页面级组件调用。如果是大型项目,你可能还会见到一个containers文件夹也是用来存放组件的,这是’容器级组件’,其中会存放调用了多个小组件,但又不是一个完整页面的组件。从组件大小级别区分 components < (containers) < views)
   • App.vue: 入口组件(打开项目我们能看到的第一个页面就是此页面)
   • main.js: webpack在打包的时候的入口文件(其中会声明当前项目使用了那些插件、依赖)
4. dist: 编译输出文件夹(新建的项目看不到此文件夹,此文件夹需要项目经过编译后才会自动生成,在项目目录下命令行中输入npm run build或者在可视化界面中运行build 编译并压缩（用于生产环境）即可,此文件夹中是最后我们项目完成后导出的经过编译和压缩的文件)
5. .browserslistrc: 描述浏览器兼容性(默认: > 1%:代表着全球超过1%人使用的浏览器, last 2 versions: 表示所有浏览器兼容到最后两个版本, not dead: 表示不支持死去的浏览器。可以自定义,比如not ie <= 9: 表示IE浏览器版本大于8, safari >= 7: 表示safari浏览器版本需大于等于7) 从此文件开始,下述所有文件对于初学者来说看看了解一下就可以,暂时无需深入了解
6. babel.config.js: es*转低级js语言的配置文件.
7. package.json: 项目包管理器(记录每个安装依赖的版本号,当其他人使用这个项目的时候,可以根据此文件快速安装版本相同的文件,以防出现因为版本不同造成的bug)。
8. package-lock.json: 项目包管理器(package.json的详细版本,package.json只会锁定大版本,比如"vue": "^2.6.11",,如果其他人读取下载package.json,会下载vue2中最新的小版本,比如是 "vue":"^2.6.12"、"vue": "^2.7.1"等,但package-lock.json则会确保版本和之前的完全一样,小版本也不会变,甚至会从完全相同的源处下载。)。
9. .gitignore: git配置文件(告诉git那些文件或文件夹不需要同步)
10. .eslintrc.js: eslint的配置文件(上述我们已经介绍过eslint是一款js规范检查规则,我们可以在这个文件中配置一些跳过的检查项,或者让其跳过对一些文件或文件夹的检查等操作。想要了解此套规范可以查看其官网)
11. README.md: 项目介绍文件。

基础使用

小组件定义和导入

定义

在vue/cli中定义组件需要对Vue自定义组件有所了解,在上述项目目录中我们简单介绍过,小组件是放于components文件夹之中,但不仅如此我们放入其中的小组件的后缀也变成了.vue,.vue和.html文件非常相似,但也略有不同.vue文件主要是由三个标签构成。下面我们就来详细介绍一下.vue文件这三个标签。

1. <template>标签: 主要用于放置HTML代码,和自定义组件中的template一样。只是这里变成了标签,更方便我们编写,可读性也更高了。
2. <script>标签: 放入各种js脚本的地方。想要从其他组件调用小组件我们需要用到export default {},其中我们可以定义小组件的名字name和接收传入使用的props。但需要注意的时候,接收的值我们需要以键值对的方式定义,键名为调用组件时使用的属性名,而值这是此属性的类似。
3. <style>标签: 用于放置css文件,其中最常用的是lang和scoped这两个属性,其中lang主要是指定CSS的预处理器所用,上述创建项目时我有所介绍,而scoped非常关键,他让本组件中的css属性不会影响到其他组件,如果没有scoped属性,你调用的组件中css会影响原组件的样式。

<template ><div class="sty"><p>这是首页,{{ vdata }}</p></div>
</template><script>
// 这里可以写export或export default,区别是export可以有多个,而export default只能有一个
export default {name: 'dome',props: {vdata: String}
}</script><style scoped>.sty{color: chartreuse; }
</style>

导入

我们如果要在view中的页面级组件中调用小组件,只需先进行导入,import 别称 from 路径,然后同样在export default {}中调用即可,导入后的小组件就可以再<template>中直接调用了。

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><vdome vdata=123 /></div>
</template><script>
// @是/src的简写(别名)
import vdome from '@/components/dome.vue'export default {name: 'Home',components: {vdome}
}
</script>

自定义vscode模板

如果你常用vscode做前端,应该知道在.html后缀的文件中输入!可以快速输出一个模板,在.vue文件中我们同样也可以做到快速输出。首先,我们点击左下角的设置,选择用户代码片段,然后选择vue.json(如果没有可以自行新建),中间即可输入我们想要的模板代码!我当前的模板代码在下方,可以自行复制。

{// 将用于vue的代码片段放在这里。// 每个代码片段都在代码片段名称下定义，并具有前缀、主体和描述。// 前缀用于触发代码片段，主体将被展开和插入。// 可能的变量有:$1，$2用于制表符位置，$0用于最终的光标位置，// ${1:label}， ${2:another}用于占位符。连接具有相同id的占位符。// 例如:"vue-components": {// 前缀,模板调用简拼"prefix": "!vc",// 主体"body": ["<template ${2}>","\t<div>\n\t\t${3}\n\t</div>","</template>\n","<script>","export default {","\tname: '${1:dome}',","\tprops: {\n\t\tmsg: String\n\t}\n}","</script>\n","<style scoped>\n\t\t\n</style>"],// 模板简介"description": "Vue小组件模板"},
}

路由使用

创建路由

首先我们打开路由配置文件,router/index.js(创建项目的时候选了Router才能看见这个文件夹和其中的文件)。
我们主要在routes中定义个组件直接的路由关系,其中path是给组件指定一个路由中使用的路径(在之后组件中调用路由时使用),name是路由名称(可以看成是路由的别名),component是组件所在位置。
component指定位置有两种方式。

• 方法一: 先进行import 组件名 from 组件路径引入,在下方使用的时候就可以直接引入component: 组件名
• 方法二: 直接在使用的时候创建一个匿名函数,并返回组件路径即可,比如function(){return import('../views/Home.vue')}(可简写为() => import('../views/Home.vue'))

在router我们可以对路由进行一些配置,路由的两种模式(hash和history)就可以在此处定义。两种路由模式下的URL略有不同,大家可以自行尝试一下不同情况下路由的样式,如果不写模式,默认会使用hash。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// import About from '../views/About.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',// 方法一component: Home// 方法二// component: () => import('../views/Home.vue')},{path: '/about',name: 'About',// 路由级代码拆分// route level code-splitting// 这将为此路由生成一个单独的块（about.[hash].js）// this generates a separate chunk (about.[hash].js) for this route// 当访问路由时延迟加载。// which is lazy-loaded when the route is visited.// 方法一// component: About// 方法二component: () => import(/* webpack块的名字: "about" */ '../views/About.vue')}
]const router = new VueRouter({// 路由模式(常用有hash和history模式)mode: 'history',base: process.env.BASE_URL,routes
})export default router

调用路由

在调用路由的时候我们需要知道两个标签,分别是<router-link>与<router-view>,其中<router-link>类似与<a>标签,用来定义加载链接使用,<router-view>是路由出口,是指定加载的组件放入位置时使用。这里介绍的路由只是一些非常基础的方法,并且并不详细,如果想要详细了解路由,可以查看vue-router的官网或者我的博客

<template><div id="app"><div id="nav"><router-link to="/">首页</router-link> |<router-link to="/about">路由测试</router-link> |<!-- 使用name调用路由 --><router-link :to="{name: 'Home'}">使用name调用路由</router-link></div><router-view/></div>
</template><style>
#app {text-align: center;color: #2c3e50;
}#nav {padding: 30px;
}#nav a {font-weight: bold;color: #2c3e50;
}#nav a.router-link-exact-active {color: #42b983;
}
</style>

项目导出

之前在创建项目时候大家应该就能发现,vue项目启动比较繁琐,直接打开index.html我们啥也看不到,但如果项目要正式上线服务器,作为生成环境使用,这时候我们就需要对vue进行编译压缩。如果你是用的是vue ui,只需找到build 编译并压缩（用于生产环境）,并启动,vue就会开始将项目导出到一个dist文件夹中,这个文件夹我们在之前也介绍过。(如果你是用的是命令行,需要在项目文件路径下输入npm run build)

输出的文件中,我们放在web服务器的www文件夹中即可，但在本地点开index.html文件还是空白页面,如果想要在本地能打开index.html页面

本地开的页面空白解决方法

1. 将路由模式改为hash(在router/index.js文件中将mode: 'history',注释,或者将其修改为mode: 'hash',),如果项目没有路由,可以省去这一步
2. 在项目根目录(dist,src等文件夹同级)中创建vue.config.js,并在其中写入

module.exports = {publicPath:"./"
}

如果想要使用history模式同时进行本地预览,则必须要搭建本地服务器,这里建议还是将其放入web服务器中预览。

vue/cli是什么?vue/cli如何使用? 入门篇(安装创建,组件使用,定义路由,项目导出) ∠( °ω°)／ 前端知识相关推荐

1. 在线教育项目02_前端知识（es6、vue）

   在线教育项目02_讲师管理模块 一.统一异常处理的另外两种情况 1.1 特殊异常(特定异常处理) 1.2 自定义异常处理 二.统一日志处理 1.Logback日志工具 三.ECMAScript 6.0 ...

2. Vue如何自定义组件?超详细Vue自定义组件指南!使用自定义组件减少重复造轮子! ∠( °ω°)／ 前端知识

   文章目录 使用意义 基础使用 给组件添加属性 传递事件 自定义组件的v-model 剖析v-model原理 使用示例 插槽 使用意义 有时候一组HTML代码可能会在多出使用(比如页眉页脚).如果我们把 ...

3. webpack+vue+vueRouter模块化构建完整项目实例详细步骤-入门篇

   新建项目 开始(确认已经安装node环境和npm包管理工具) 1.新建项目文件名为start_vuedemo 2.npm init -y 初始化项目,我的win7系统,工程在d盘的vue_test_p ...

4. 前端学习（3021）：vue+element今日头条管理--创建组件和配置路由

5. 前端学习（3002）：vue+element今日头条管理--创建组件和设置路由

6. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

   写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

7. Vue学习笔记入门篇——数据及DOM

   本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...

8. vue如何创建vnode_【Vue原理】Component - 源码版 之 创建组件VNode

   专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧 研究基于 Vue版本[2.5.17] 今天就要开启我们 Component 探索之旅 ...

9. VSCode 搭建Vue开发环境之Vue CLI

   2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...

最新文章

1. nodejs文件上传报错总结
2. 基于px2rpx-loader，探讨一下loader的封装思想
3. javax.swing.jFrame
4. Markdown简介和基本语法
5. 201912-3 化学方程式
6. 【LeetCode笔记】6. Z字形变化（JAVA、思路）
7. 设置导航栏的相关属性
8. STM32F103_DDWG窗口看门狗
9. Mysql/Mariadb本地不可以登录，远程可以登录问题的解决
10. Leetcode之整数反转
11. Python学习之路 第3次笔记！
12. SIM900A更改波特率
13. ZOJ 3987 Numbers（枚举）
14. 二进制十进制小数转换
15. win7安装JAVA程序闪退怎么办_win7打开软件闪退如何解决
16. 移动互联网应用的十项设计原则和小提示
17. GPS警用车辆3G视频监控系统方案
18. [渝粤教育] 天津大学 21 秋 物理化学2B（李松林，侯德榜） 参考 资料
19. OpenGL二次曲面绘制
20. Android iOS APPUI设计规范实例(详细的UI设计方法）

热门文章

1. BeautifulSoup4爬取猫眼电影前一百
2. nvidia jetson nano 风扇控制
3. java发送微信小程序模板消息_微信小程序-发送模板消息
4. cocos shader 用到的数学 抛物线,直线方程篇
5. android bitmap.createbitmap内存溢出,android bitmap oom 优化
6. 「镁客·请讲」FXG Nikk Mitchell：优质VR内容能够带你真正进入细节
7. easyui combobox设置默认选项
8. ubuntu bond
9. python中^是什么意思
10. 缓存字节流BufferedInputStream使用及原理解析