第八节:Vue-cli 脚手架
Vue-cli 是官方提供的脚手架,用于快速创建一个Vue应用的开发环境,包括基本项目目录结构,文件组件渲染,项目打包,sass环境等。Vue-cli基于nodeJS环境所以需要先安装nodeJS。
1、安装nodeJS
nodeJS 官方下载地址:http://nodejs.cn/download/
打开官网,然后傻瓜式操作就可以了。
检测安装是否成功:
1、
window + R
,输入cmd
回车打开命令行工具。 2、输入
node -v
3、回车打印出当前安装的nodeJS版本号则安装成功。
4、输入
npm -v
npm是node自带node package manage 安装node会自带安装npm,npm没有安装包 npm是国外包。 5、安装淘宝镜像
使用npm 安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org
6、安装
yarn
yarn 是facebook(脸书)发布的一款取代npm的包管理工具, yarn特点: 1、速度快 yarn 缓存了每一个下载过的包,所以再次使用是无需重复下载,同时利用并行下载大量的资源利用率因此安装速度快。 2、安装 在执行代码之前,yarn会通过算法校验每个安装的完整性。 3、可靠性:使用详细、简洁的锁文件格式和明确的安装算法,yarn能够保证在不同系统上无差异的工作。 使用cnpm 安装yarn: npm install -g yarn 查看版本: yarn -v yarn --version
2、安装 Vue-cli
脚手架:
已经准备好的模板,在里面写内容。脚手架版本号:2.x版本脚手架、3.x版本脚手架、4.x版本脚手架
搭建相关的环境:
安装webpack:
指令:npm i(install) webpack-cli -g(global) 简化指令:npm install webpack-cli -g 安装的时候出现问题: 使用 npm install安装 使用 npm uninstall卸载 使用 npm uninstall webpack-cli -g
*安装Vue-cli:*2.X版本
1、输入命令
npm install -g vue-cli
回车等待安装 选择2.x版本初始化项目:
Vue-2.X版本创建项目 1、任意新建一个项目文件夹。 2、命令切换到该文件夹的目录 cd <xxx:folderPath>。 3、输入命令 vue init webpack <xxx:folderName> 回车 输入项目初始化配置 等待项目加载完成。 4、切换到项目目录,启动项目,项目启动成功,浏览器数据提示的地址打开项目。 cd <xxx:folderPath> npm run dev
打开项目:
1、浏览器输入提示的地址端口。等待项目打开成功
安装Vue-cli 3.X版本以上:
安装交接工具
npm install -g @vue/cli-init
初始化项目:
Vue-3.X版本创建项目 1、任意新建一个项目文件夹。 2、命令切换到该文件夹的目录 cd <xxx:folderPath>。 3、输入命令 vue create <xxx:folderName> 回车 输入项目初始化配置 等待项目加载完成。 4、切换到项目目录,启动项目,项目启动成功,浏览器数据提示的地址打开项目。 cd <xxx:folderPath> npm run serve
3、运行项目
切换项目位置
cd <xxx:folderName>
运行项目
2.X
npm run dev
3.X
npm run serve
4、创建项目路程 3.X为例
1、通过
vue create xiaoge-vue-demo-1
创建项目 xiaoge-vue-demoVue CLI v5.0.8 ? Please pick a preset: (Use arrow keys) > basevuemodel ([Vue 2] less, babel, pwa, router, eslint) xiaoge-base-project ([Vue 3] less, babel, router, vuex) Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features
2、选择手动配置项目参数
Manually select features
3、选择配置需要的依赖模块
Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) >(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
4、根据项目需要选择模块
(*) Babel (*) Router (*) Vuex (*) CSS Pre-processors
5、选择Vue版本
Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) > 3.x 2.x
6、选择3.x版本
Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors ? Choose a version of Vue.js that you want to start the project with 2.x ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
7、使用历史模式路由器?(需要在生产环境中为索引回退设置适当的服务器)(Y/n)
Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors ? Choose a version of Vue.js that you want to start the project with 2.x ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) > Sass/SCSS (with dart-sass) Less Stylus
8、选择预处理语音一般常用 less
Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors ? Choose a version of Vue.js that you want to start the project with 2.x ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.json
9、配置参数信息 In package.json
Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors ? Choose a version of Vue.js that you want to start the project with 2.x ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? (y/N)
10、是否保存为项目模板
Vue CLI v5.0.8 ✨ Creating project in C:\Users\xiaoge\Desktop\Vue2\xiaoge-01-vue. ⚙️ Installing CLI plugins. This might take a while... > core-js@3.24.1 postinstall C:\Users\xiaoge\Desktop\Vue2\xiaoge-01-vue\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}" added 829 packages from 461 contributors in 15.375s 87 packages are looking for funding run `npm fund` for details 🚀 Invoking generators... 📦 Installing additional dependencies... added 22 packages from 17 contributors in 3.762s 89 packages are looking for funding run `npm fund` for details ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project xiaoge-01-vue. 👉 Get started with the following commands: $ cd xiaoge-01-vue $ npm run serve 等待安装项目 下载配置依赖
5、项目文件介绍
目录
.node_modules/ 依赖
.public/ 静态资源
.src/ 源代码
.gitignore
告知 git 那些文件或文件夹不需要添加到版本管理中
babel.config.js
Babel 是一个 JavaScript 编译器,可以对 JavaScript 文件进行转码,类似的有 ES6 转为 ES5 兼容不同的浏览器。babel.config.js是 babel 的配置文件,presets字段设定转码规则,此处 @vue/cli-plugin-babel/preset就是规则。 module.exports = { presets: ['@vue/cli-plugin-babel/preset'] }
jsconfig.json
jsconfig.json源于tsconfig.json,是TypeScript的配置文件。 jsconfig.json相当于tsconfig.json的“allowJs”属性设置为true
package-lock.json
依赖下载地址
package.json
package.json文件提供了很多项目相关的信息,主要有这个项目所需要的各种模块;以及项目的配置信息(比如名称、版本、许可证等元数据);还可以配置一些简化script执行脚本。项目中json文件是不能添加注释的,需要删除相关注释。 { "name": "vue-project", // 项目的名称 "version": "0.1.0", // 项目的版本号 大版本号.小版本号.修订版本号[.日期版本号] "private": true, // 是否对外开发,private为true表示不对外开放 "scripts": { // script配置脚本对象,表示npm run XXX "serve": "vue-cli-service serve", // 配置serve脚本,表示npm run serve 等同于 vue-cli-service serve 命令 "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { // 依赖的相关信息,这里主要是生产和开发依赖,一般用npm install XXX --save 安装的依赖就会添加到这里 "core-js": "^3.6.5", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, "devDependencies": { // 开发依赖的相关信息,这里的主要是开发过程的依赖,生产环境中不会存在,一般用 npm install XXX --save-dev 安装的依赖会添加到这里 "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/eslint-config-prettier": "^6.0.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^6.2.2", "lint-staged": "^9.5.0", "node-sass": "^4.12.0", "prettier": "^2.2.1", "sass-loader": "^8.0.2", "vue-template-compiler": "^2.6.11" } }
README.md
这个文件就是项目的介绍文件,使用 markdown 语法。
vue.config.js
这个文件表示 vue 的配置文件,像一些简单的前端服务运行的端口号,是否自动打开,代理地址等。下面是一些简单的配置 const path = require('path') // 导入Node的path模块 // 解析函数,在配置引入别名时用到 function resolve(dir) { return path.join(__dirname, dir) } // vue.config.js的主体配置 module.exports = { publicPath: '/', // 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致。 outputDir: 'dist', // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。 assetsDir: 'assets', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 css: { // 对css的一些配置 extract: true, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。 sourceMap: false // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。 }, lintOnSave: process.env.NODE_ENV === 'development', // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。 devServer: { // 服务相关的设置 host: '127.0.0.1', // 指定一个主机名 port: 8000, // 指定一个端口号 open: true, // 运行成功后是否自动打开页面 proxy: { // 代理相关。如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器 '/api': { // 对请求接口中出现的api进行代理 target: process.env.VUE_APP_PROXY_URL, // 代理的目标地址,这个取值在后面的文件会讲到 changeOrigin: true, // 是否改变域名, ws: false, // 是否开启webSocket pathRewrite: { // 路径重写,如果默认不重写路径,那么`/api/users`会被代理到`target路径/api/users` '^/api': '' // 对api进行路径重写,重写后,那么`/api/users`会被代理到`target路径/users` } } } }, // webpack相关的配置,可以设置plugins和别名解析等 configureWebpack: { // 解析设置 resolve: { // 别名配置,用来创建 import 或 require 的别名,来确保模块引入变得更简单。 alias: { // 用'@'表示src的路径, @/views/Home.vue 等同于 src/views/Home.vue. '@': resolve('src'), // 同理,用@components 表示 src/components目录 '@components': resolve('src/components'), '@assets': resolve('src/assets') } }, // 配置webpack的plugins plugins: [] }, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 productionSourceMap: false }