Vue入坑教程(一)——搭建vue-cli脚手架

一世执手 提交于 2021-02-17 12:46:21

1. Vue简介

详细内容可以参考官网Vue.js

1)兼容性

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

目前ECMAScript 6已经渐渐流行起来,但是有一些浏览器还不完全支持,所以在使用ECMAScript 6时,可以通过Babel转码器进行转换

2)使用方式

(1) 直接用<script>引入

直接在html页面中引入<script>Vue 会被注册为一个全局变量。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

这个适合单独的H5页面的使用

(2)命令行工具vue-cli

适合构建大型应用,配合npmnpm能很好的和webpack等模块打包器配合使用。

# 全局安装vue最新版
$ npm install vue

2. 环境搭建

1)安装node.js

傻瓜式安装,官网下载node.js,一路点击下一步安装。

打开命令行工具,输入node -v,如果显示node 版本号,则表示安装成功。

**注意:**官网安装的node.js后,就已经自带包管理工具npm

2)安装淘宝镜像cnpm或是yarn

**原因:**这一步也可以省略,安装的理由是npm的服务器是外国,有时候我们安装依赖执行的操作超级慢,而cnpm 或是 yarn执行的速度较快,特别是在执行npm indstall时,淘宝镜像cnpm installyarn相对比较明显的快。

淘宝镜像安装: 打开命令行工具,输入

    npm install -g cnpm --registry= https://registry.npm.taobao.org

安装完后,通过cnpm -v查看版本号来判断是否安装成功

yarn 参考官网教程yarn 安装

**注意:**推荐使用淘宝镜像或是yarn,接下来下面都是用淘宝镜像执行的。

3)全局安装vue-cli

# 全局安装
cnpm install -g vue-cli

同样通过命令行工具使用vue -V 查看版本号判断是否安装成功

3. 构建项目

###1)初始化一个项目

在一个文件夹下面初始化来新建一个工程项目,推荐使用git自带Git Bash Here

# vue init 是vue初始化项目
# webpack 是打包工具,其中也可以使用Browserify,感兴趣可以自行研究
# project 是自定义的项目名称
vue init webpack project

命令执行之后,会在当前目录下生成一个以project命名的项目文件夹。

命令执行时会显示下列选项:

$ vue init webpack project--------------------- 安装vue脚手架的命令,采用webpack打包工具,项目名是project
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 project
? Project name (project) ---------------------项目名称
? Project name project
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author wujy--------------------- 项目创建者
? Author wujy
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,推荐安装,是页面跳转用的
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no,因为这里有很多的坑,具体以后会讲
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) n  ----------------是否安装单元测试,因人而异,可以自行选择
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) n  --------------------是否安装e2e测试,可自行选择
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "project".
To get started: --------------------- 这里说明如何启动这个服务
cd project   --------------------进入项目文件夹
npm install	  ---------------------安装依赖,推荐使用淘宝镜像cnpm
npm run dev  -----------------------项目运行

###2)运行项目

执行上述操作之后,可以看到本地多了一个project文件夹

# 运行项目
cd project  ------------进入工程目录
cnpm install  -------------安装依赖,如果要具体安装其他模块可以单独使用,具体以后讲
# 执行之后,目录里多了一个node_modules文件夹,这里放的就是所有依赖的模块
cnpm run dev   ------------运行项目
# 打包工作,用于正式环境
cnpm run build

本地localhost:8080就可以打开一个HelloWorld.vue,默认服务器启动的是8080端口,当然也可以通过更改配置来修改默认端口

4. 文件目录分析

build	-------------------项目构建相关代码(webpack配置)
	build.js  -------------生产环境构建代码
	check-versions.js  ----检查node、npm等版本
	utils.js  -------------构建工具相关
	vue-loader.conf.js  ----css加载器的配置
	webpack.base.conf.js  ---webpack的基础配置信息
	webpack.dev.conf.js  ----webpack开发环境配置信息,构建开发本地服务器
	webpack.prod.conf.js  ---wenpack生产环境配置信息
config	-------------------配置目录,包括端口号,打包输出等的vue基本配置文件
	dev.env.js  -----------开发环境变量
	prod.env.js -----------生产环境变量
	index.js  -------------项目的配置变量,端口号等 
node_modules	-----------加载的项目依赖模块
static	-------------------静态资源目录
index.html	---------------首页的入口文件,可以添加meta等参数
README.md	---------------项目的说明文档,makedown格式
src	-----------------------源码目录,主要的开发
	assets  ---------------静态资源,css,image等可以存放
	components  -----------公共组件
	router  ---------------路由文件夹,配置页面跳转
	views  ----------------页面编写的地方,(可以自行定义命名)
main.js  ------------------入口文件,全局的配置和加载
.babelrc  -----------------ES6语法编译配置,用来将es6代码转换成浏览器可识别的es5代码
.gitignore  ---------------git上传需要忽略的文件的格式
package.json  -------------项目的基本信息,包括开发所需要的模块、项目名称、版本号等
.postcssrc.js  ------------转换css的工具
.editorconfig  ------------定义代码格式

综上所述: 详细文件的分析可以参考官网vue.js 初次尝试vue,可以用普通的引入javascript文件的方法。如果有一定的基础,可以用vue-cli脚手架进行进阶的操作

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!