介绍
建议先学习下Webpack,再学习Vue CLI,https://www.yuque.com/yejielin/mypn47/qh6irh
=====================
安装
1、安装node.js
下载
推荐下载左边的稳定版本
安装
安装时下一步下一步
验证(查看版本)
cmd,输入node -v,出现版本号说明安装成功
查看安装路径
cmd,输入where node
为什么要安装Nodejs?因为要它的包管理工具NPM
2、配置CNPM
由于npm服务器是在国外,因此安装npm里面的模块时,可能会很慢。
这里建议可以配置淘宝的npm镜像,淘宝会实时与npm服务器同步,因此用cnpm安装模块时要快很多。
配置
cmd 打开命令行,输入 npm install -g cnpm —registry=https://registry.npm.taobao.org
3、安装Vue Cli
安装/更新
cmd 打开命令行,输入cnpm install -g @vue/cli
验证(查看版本)
cmd 打开命令行,输入vue —version
升级
npm update @vue/cli -g
卸载
cmd 打开命令行,输入npm uninstall -g vue-cli
====================
进入Vue Cli(命令行)
1、创建命令
vue create 项目的名称
2、选择配置
选了typeScripts的,会问你是否用Babel来编译TS(有两种方式编译TS,一种是通过tsc,一种是通过babel,推荐是babel,可以通过polyfills打上补丁,也是官方推荐)
如果选了ESLint(代码规范检测),会问你用什么规范
然后问你什么时候进行代码检测,是保存的时候就检测(第一项),还是编译的时候检测(第二项)
3、安装完成
4、运行项目DevServer本地服务器
可以在Package.json 里面的脚本scripts看到命令,
npm run serve
# 相当于
vue-cli-service serve
5、打包编译
npm run build
# 相当于
vue-cli-service build
====================
进入Vue Cli(图形,新手推荐)
cmd 打开命令行,输入vue ui
会进入一个图形化的网页,如下
1、创建项目
点击创建,选择路径即可
2、手动选择配置
1、选择Vue版本,下一步可以选择Vue2还是Vue3
2、Babel:代码转换的工具
如ES6+版本转换成ES5。可以查看https://www.yuque.com/yejielin/mypn47/zu6tft
3、TypeScript:JS的超级,主要是在JS的基础上多了很多类型检测,可以查看https://www.yuque.com/yejielin/mypn47/ah7ky5
4、Router:Vue Router,Vue全家桶之一,主要用于页面跳转,页面路由,可以查看https://www.yuque.com/yejielin/mypn47/gefgyt
5、Vuex:Vue全家桶之一,主要用于公共变量,多个页面共享一些变量,可以查看https://www.yuque.com/yejielin/mypn47/gqfk8w
6、CSS Pre-processors:CSS预处理器模块,主要用于处理LESS、SASS等CSS的语言
7、linter:代码校验工具,用于团队中给代码制定规则,大家都要遵守,否则会报错
8、Unit Testing :单元测试,可以测试JS代码质量
9、E2E Testing:前端端对端测试
10、使用配置文件:意思是问你是否把上面的插件,单独建立他们自己的配置文件,而不是合在一个文件里面。
新手一般开始选1/4/5就可以了,1选Vue3
3、创建完成
如下:
4、配置项目
5、运行项目DevServe本地服务器
点击任务,点击serve,点启动即可,然后进入http://localhost:8080 ,就会弹出新建项目的默认页面
6、打包编译
编译压缩后,会在项目目录下生成一个dist文件
文件夹里面有js文件、css文件等,还有index.html文件,全部放到服务器上就可以运行了。
7、安装依赖
这里会显示项目依赖的JS模块,升级、卸载、安装都在这个界面进行,非常人性化。
=================
项目配置 vue.config.js
Vue脚手架默认是没有配置文件的,内部已经帮我们做好基本的配置,开箱即用。
如果你对现在的配置不满意,可以手动在项目根目录下创建 vue.config.js 文件,在文件里面写配置,到时候会合并到脚手架的配置里面。
vue.config.js有三种配置方式,都可以用,其中一个就可以了
方式一:CLI提供的选项
比如publicPath:配置应用程序部署的子目录(默认是 /
,相当于部署在 https://www.my-app.com/
);
比如outputDir:修改输出的文件夹;
这些属性可以看官方文档
官方文档:https://cli.vuejs.org/zh/config/#vue-config-js
方式二:通过configureWebpack属性修改webpack的配置
可以是一个对象,直接会被合并;
可以是一个函数,会接收一个config,可以通过config来修改配置;
方式三:通过chainWebpack修改webpack的配置
是一个函数,会接收一个基于 webpack-chain 的config对象,可以对配置进行修改;
示例
// vue.config.js
const path = require('path') // 这个是nodejs的一个路径模块,这里引入是为了获取项目的绝对路径
//commonjs方式,因为是在nodejs环境下执行
module.exports = {
// 方式一
outputDir: './build',
// 方式二,和下面是一样的
// configureWebpack: {
// resolve: {
// alias: {
// views: '@/views'
// }
// }
// }
// 方式二,和上面是一样的
// configureWebpack: (config) => {
// config.resolve.alias = {
// '@': path.resolve(__dirname, 'src'),// 固定写法,通过nodejs的path模块获取绝对路径下的src目录,设置为别名@
// views: '@/views'
// }
// },
// 方式三,链式配置
chainWebpack: (config) => {
config.resolve.alias
.set('@', path.resolve(__dirname, 'src'))
.set('views', '@/views')
}
}
historyApiFallback 路由跳转失败后处理
现在前端可以做到前端路由,前端路由的原理是利用改变浏览器现在访问的地址的情况下,不发生跳转,同时还能显示其他界面。可以查看 https://www.yuque.com/yejielin/mypn47/gefgyt。
但是如果用户点击刷新,很可能会直接报404,因为用户当前的路径在后端是没有任何配置的。
比如用户现在访问的是192.168.0.200:8080/,进入了系统的首页,然后用户点击用户管理,路径变为:192.168.0.200:8080/user,由于前端路由,浏览器会显示用户界面。
此时如果用户点击浏览器的刷新,浏览器会按192.168.0.200:8080/user去访问服务器,其实服务器根本就没有192.168.0.200:8080/user这个页面,因此没办法返回任何信息,只能返回错误代码404,找不到任何信息。
设置,但官网不推荐我们设置。我们其实还可以通过Vue Router路由代替这个效果。查看 https://www.yuque.com/yejielin/mypn47/dlefh4#xVRXE
=================
项目结构
文件解释
node_modules:一些依赖包,这里出现的一般都有在package.json中配置的
public:存放网页的小图标、主页等,这个文件夹打包时会原封不动放到dist里面,不会命名
|— favicon.ico :创建时送的小图标,显示的是vue的标志
|— index.html :网页的主要入口,一般在这里设置放入什么组件
src:源码,我们就在这个文件夹内写代码
|—assets:放置一些图片,如logo等,这里的打包后会自动命名,并且小于一定大小的会直接变成string文件
|—components:放一些公共组件
|—App.vue:页面入口文件,我们也可以直接将组件写这里,而不使用 components 目录
|—main.js:程序入口文件,加载各种公共组件
.browserslistrc:项目打包转换后,想适配的浏览器
>1%市场份额的浏览器,且适配各个浏览器最新的2个版本,且还在维护的浏览器品牌
其他配置可以查看:
.editorconfig:定义代码格式,例如缩紧是用什么(一般是空格space),缩紧多少个,最后一行要不要插入空行等,安装时选择linter才会有
.gitignore:git上传时忽略的一些文件,比如node_modules这个文件夹
babel.config.js:babel解释器的配置文件,注意是将ES6代码转成ES代码,可以查看https://www.yuque.com/yejielin/mypn47/zu6tft
package.json:项目信息,项目名称,开发的依赖包等,一个JSON文件
|—“script” 简写的命令,以及它具体执行的命令
|—dependencies,生产环境下所依赖的包
|——版本号”^1.0.0”,^表示大于等于1.0.0的最近一个版本,版本不会超过1.0.X
|—devDependencies,开发环境所依赖的包
package-lock.json:安装依赖的实际版本,例如上面说的版本不会超过1.0.X,假如是1.0.9,那么要有个地方告诉项目我实际上用的是1.0.9,对应上面的”^1.0.0”,就是这个文件
readme.md:项目说明
webpack的配置已经被隐藏起来了,放在node_modules\@vue\cli-service 里面
建议目录结构
参考
src
|—assets:放图片img和样式css
|—views:放一些大的页面视图
|—pagename:一些页面和名字
|—childcomponent:这个页面相关的子组件
|—components:放一些公共组件
|—common:放一些其他项目也能用的组件,到时候直接一个文件夹复制过去就能用
|—content:针对本项目的公共组件,放到别的项目无法直接用的
|—router:路由
|—store:vuex
|—network:网络相关
|—common:公共的js文件,如一些常量、工具类、混入等
=================
Vue Cli 运行原理
1、npm run serve
相当于运行vue-cli-service serve,这个命令哪里找?
会在 项目目录/node_modules/.bin/vue-cli-service 里面找
2、判断Nodejs版本
vue-cli-service 文件一开始会判断Nodejs版本,版本太低会提示并退出
3、引入一个Service的模块
这里的路径是类似软连接,并不是代码实际执行的地方,如果你去这个文件所在的目录/node_modules/.bin/下找是找不到这个路径的。
实际上文件在 项目目录/node_modules/@vue/cli-service/bin/
最终执行的是bin/vue-cli-service.js
里面也是依赖一个service这个类
4、创建Service对象
5、调用run运行方法
command 就是我们传过来的命令
Service类:
Service类的run方法:
把serve或build这两个,传到commands对象里面,取出对应的执行函数fn,然后调用这个函数
这个函数要不就是和serve本地服务有关的,要不就是和build打包有关
commands对象默认是个空对象,这个空对象当然是没有上面fn这个函数,什么时候这个commands被赋值呢?
当插件加载的时候,给commands被赋值,让它有对应的fn执行函数
6、加载环境变量
加载用户的选项
7、插件
遍历插件,拿到插件方法
插件方法赋值给解决插件的方法,
会把方法给到commands