Vue系列入门教程(6)——vue-cli脚手架

Web前端 潘老师 1年前 (2020-09-03) 1513 ℃ (0) 扫码查看

1、兼容性问题
2、使用模块化会导致JS文件增加,从而导致传输文件数增加,增加网络IO
3、直接使用原始代码会导致文件体积过大
4、使用第三方库很不方便
1)搜索
2)下载
3)引用js (某些第三方库可能没有ES6模块化版本)
5.、vue模板书写在字符串中,没有智能提示,没有代码着色
6、难以把css样式代码集成到vue组件中
7、其他诸多细节问题…

这些问题的本质是:开发的代码和运行的代码要求不同
所以,我们需要一个工具,它能够让我们舒舒服服的写代码,然后通过这个工具转换后,得到一个最适合运行的代
码。在vue中,这个工具就是vue-cli
Vue系列入门教程(6)——vue-cli脚手架

vue-cli是一个脚手架工具,它集成了诸多前端技术,包括但不仅限于:

  • webpack
  • babel
  • eslint
  • http-proxy-middleware
  • typescript
  • css pre-prosessor
  • css module
  • ….

这些工具,他们大部分都要依赖两个东西:
  • node环境:很多工具的运行环境
  • npm:包管理器,用于下载各种第三方库

提示:目前,npm已和node集成,当安装node后,会自动安装npm

1、官网下载node:
官网地址:https://nodejs.org/zh-cn/,选择长期稳定版
Vue系列入门教程(6)——vue-cli脚手架

2、安装nodejs
双击下载好的msi文件安装node,全部都直接Next,安装路径可自行调整

3、验证安装
安装成功后,打开cmd命令行,使用如下指令查看node和npm版本,验证是否安装成功:

node -v
npm -v

Vue系列入门教程(6)——vue-cli脚手架

4、配置源地址
默认情况下,npm 安装包时会从国外的地址下载,速度很慢,容易导致安装失败,因此需要先配置npm的源地址,使用下面的命令更改npm的源地址为淘宝源

npm config set registry http://registry.npm.taobao.org/

更改好了之后,使用如下指令查看源地址是否正确的被更改

npm config get registry

Vue系列入门教程(6)——vue-cli脚手架

5、安装vue-cli
使用下面的命令安装vue-cli工具

npm install -g @vue/cli

安装好之后,检查vue-cli是否安装成功

vue --version

Vue系列入门教程(6)——vue-cli脚手架

提示:如果出现vue指令不是内部命令,则可以在执行安装vue指令的目录中或全盘查找vue.cmd文件,然后将文件所在目录配置到环境变量的path中,如果找不到则执行npm uninstall -g @vue/cli卸载vue-cli,然后再次安装,再去查找配置

第1步:在终端中进入某个目录
选择一个目录,该目录将放置你的工程文件夹,在cmd终端中进入该目录
第2步:搭建工程
使用vue-cli提供的命令搭建工程,命令如下:

vue create 工程名

具体演示如下:
1)进入工程目录,执行创建指令
我这里是放在F盘VueProjects下:

cd VueProjects
vue create first-app 

Vue系列入门教程(6)——vue-cli脚手架

注意:工程名只能出现英文、数字和短横线

2)执行指令后会询问工程配置方式是默认还是手工,我们通过上下键选择手工配置,然后Enter回车
Vue系列入门教程(6)——vue-cli脚手架
3)接着只选择babel,去掉Linter(按空格可选择或去掉选择),然后Enter回车
Vue系列入门教程(6)——vue-cli脚手架
4)选择vue版本,我们选择2.x,然后Enter回车
Vue系列入门教程(6)——vue-cli脚手架
5)选择配置存放方式,我们选择json,然后Enter回车
Vue系列入门教程(6)——vue-cli脚手架
6)输入n不保留配置,然后Enter回车,项目就会开始创建
Vue系列入门教程(6)——vue-cli脚手架
7)创建完成后,我们在工程目录中就可以找到对应的项目
Vue系列入门教程(6)——vue-cli脚手架
8)我们将生成的项目直接拖入HBuildX中打开,查看项目结构
Vue系列入门教程(6)——vue-cli脚手架
补充:vue-cli 4.x实际开发目录结构说明(有些目录我们之前生成的没有):

目录 含义
dist 用于存放使用 npm run build 命令打包的项目文件
node_modules 用于存放我们项目的各种依赖
public 用于存放静态资源
public/index.html 是一个模板文件,作用是生成项目的入口文件。
浏览器访问项目的时候就会默认打开的是生成好的index.html
src 是存放各种vue文件的地方
src/assets 用于存放着各种静态文件,比如css,less,sass,fonts,images,一些外部的js等
src/components 用于存放我们的公共组件,比如Header.vue、Footer.vue等
src/router/index.js vue-router路由文件。
需要引入src/views文件夹下的.vue,配置path、name、component
src/store/index.js 是vuex的文件,主要用于项目里边的一些状态保存。
比如state、mutations、actions、getters、modules
src/views 用于存放我们写好的各种页面,比如Login.vue,Home.vue
src/App.vue 是主vue模块,主要是使用router-link引入其他模块,
App.vue是项目的主组件,所有的页面都是在App.vue下切换的
src/main.js 入口文件,主要作用是初始化vue实例,
同时可以在此文件中引用某些组件库或者全局挂载一些变量
.gitignore 配置git上传想要忽略的文件格式
babel.config.js 是一个工具链,主要用于在当前和较旧的浏览器或环境中将
ES6的代码转换向后兼容(低版本ES)
package.json 模块基本信息项目开发所需要的模块,版本,项目名称
package-lock.json 是在npm install时候生成的一份文件,
用于记录当前状态下实际安装的各个npm package的具体来源和版本号

第3步:安装依赖(可省略)

注意:此步可以省略,因为我们项目已经安装了依赖,就是node_modules文件夹中的内容,如果你把此文件夹删了,可以使用此指令重新安装

在cmd终端中通过cd指令进入项目目录first-app,执行如下指令安装依赖:

npm install

Vue系列入门教程(6)——vue-cli脚手架
第4步:运行项目(开发时用)
继续执行如下指令运行项目:

npm run serve 

执行完会弹出防火墙提示,点击允许访问,运行结果如图:
Vue系列入门教程(6)——vue-cli脚手架
浏览器访问地址,正常显示首页:
Vue系列入门教程(6)——vue-cli脚手架

提示:cmd窗体此时不能关闭也无法继续输入指令,如需关闭可以使用ctrl+c关闭,那么则无法继续访问页面

第5步:编译打包部署(生产环境部署时用,开发时不用)
1)重新打开cmd,进入first-app目录,执行下面的命令编译打包生成浏览器可运行文件:

npm run build

Vue系列入门教程(6)——vue-cli脚手架
2)打开HBuildX发现多出了dist目录,这里面就是编译打包后的文件,可独立运行,生成的html、js、css文件都被压缩过了,整个目录结构是不是很熟悉?
Vue系列入门教程(6)——vue-cli脚手架
3)找到dist中index.html,直接运行到浏览器即可,不过我们发现,页面空白,无法正常显示!报错如下,通过F12查看发现js报错。
Vue系列入门教程(6)——vue-cli脚手架
4)再通过network查看发现,根本原因在于Vue-CLI 4.x在打包是会将js、css等文件默认以绝对路径的方式引入,导致运行出错。我们可以将其以相对路径方式引入,我们需要在first-app下新建一个名为vue.config.js的文件,内如如下:

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

Vue系列入门教程(6)——vue-cli脚手架
然后,重新再终端运行编译打包指令,重新生成dist,在运行到浏览器发现正常访问。
5)将dist目录中的代码直接整合部署到项目中使用,在此不再赘述

1)在文件->新建->项目,选择如下:
Vue系列入门教程(6)——vue-cli脚手架
2)创建好后,选择项目后,在左下角打开终端,执行运行指令,即npm run serve
Vue系列入门教程(6)——vue-cli脚手架
3)访问浏览器,效果一样


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:Vue系列入门教程(6)——vue-cli脚手架
喜欢 (17)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

您也可以 微信登录 来发表评论!