Vue入坑教程（一）——搭建vuecli脚手架

Z时代
2024-01-10
分类：综合

coding

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

适合构建大型应用，配合npm，npm能很好的和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 install和yarn相对比较明显的快。

淘宝镜像安装：打开命令行工具，输入

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--------------------- 安装脚手架" title="vue脚手架">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 ------------定义代码格式