后端程序员的vue学习之路
- 一、 Vue-cli
- 安装Vue-cli
- 1、安装node.js
- 2、配置node.js环境变量
- 3、 Npm仓库设置淘宝源
- 4、全局安装 vue-cli
- 5、创建vue应用程序
- 1、 创建vue项目基础骨架：
- 2、 运行项目：
- 6、vue项目结构
- 二、Vue.js项目运行逻辑分析
- 1、 npm run dev命令
- 2、webpack.dev.conf.js
- 3、config/index.js
- 4、webpack.base.conf.js
- 5、main.js
- 6、找到自定义组件App.vue
- 7、流程分析总结
- 关闭 eslint的验证，在config/index.js文件
一、 Vue-cli
Vue-cli是Vue.js 提供一个官方命令行工具，帮我们快速生成项目的原型，可用于快速搭建大型单页应用；
安装Vue-cli
1、安装node.js
下载：http://nodejs.cn/download/
最新的版本，win7不能使用；
v12.16.2以上版本不支持win7系统，要下载v12.16.2及之前的版本即可；
安装：解压即完成安装；
检查安装后的效果：
node -v
npm -v
新版的Node.js已自带npm，安装Node.js时就已经安装，npm的作用就是对Node.js依赖的包进行管理，可以理解为用来安装/卸载Node.js需要依赖的库；
2、配置node.js环境变量
1、在 自己的node安装目录下创建两个文件夹，例如我的D:\02_JavaSoftware\Node14.15.1下创建2个文件夹：
- node_global （依赖库）
- node_cache （缓存）
2、然后再当前目录下cmd进入dos窗口，执行：
npm config set prefix "D:\02_JavaSoftware\Node14.15.1\node_global"
npm config set cache "D:\02_JavaSoftware\Node14.15.1\node_cache"
3、环境变量Path配置，在path变量中添加如下路径：
D:\02_JavaSoftware\Node14.15.1;D:\02_JavaSoftware\Node14.15.1\node_global;
4、在任意目录打开dos窗口测试下：
node -v
npm -v
5、安装一个模块（依赖库）测试一下看看：
npm install express -g #其中-g是全局安装的意思
全局安装就会把express模块安装到；
D:\02_JavaSoftware\Node14.15.1\node_global目录下，否则就会安装到了当前执行命令所在的目录下：C:\Users\Administrator
- express是一个快速，无缺陷，极简的Web框架；
3、 Npm仓库设置淘宝源
Npm仓库：https://www.npmjs.com/
查看目前的npm仓库源：
npm config get registry
在使用npm命令时，如果直接从国外的仓库https://www.npmjs.com/ 下载依赖，下载速度很慢，甚至会下载失败，我们可以更换npm的仓库源，提高下载速度，淘宝给我们提供了一个npm源；
//设置淘宝源
npm config set registry https://registry.npm.taobao.org
或者安装cnpm，以后用cnpm命令也可以
// 安装cnpm命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
最后可在c盘usr目录下查看.npmrc文件内容如下
4、全局安装 vue-cli
$ npm install -g @vue/cli
$ npm i -g @vue/cli-init
如果安装失败可以先执行尝试清一下缓存：npm cache clean –force (清楚npm缓存)
5、创建vue应用程序
1、 创建vue项目基础骨架：
$ vue init webpack vue-project #这里需要进行一些配置，默认回车即可
其中vue-project是项目工程名称；
2、 运行项目：
进入项目，安装并运行：
$ cd vue-project
$ npm install
$ npm run dev
DONE Compiled successfully in 4388ms
Listening at http://localhost:8081
成功执行以上命令后访问 http://localhost:8081/ 输出结果；
6、vue项目结构
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等; |
| node_modules | npm 加载的项目依赖模块; |
| src | 这里是要开发的目录，基本上要做的事情都在这个目录里,包含了几个目录及文件： assets: 放置一些图片，如logo等; components: 目录里面放了一个组件文件，可以不用; App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录; main.js: 项目的核心文件; |
| static | 静态资源目录，如图片、字体等; |
| test | 初始测试目录，可删除; |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等; |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的; |
| package.json | 项目配置文件; |
| README.md | 项目的说明文档，markdown 格式; |
根据模板生成的结构，其文档：
https://vuejs-templates.github.io/webpack/
二、Vue.js项目运行逻辑分析
1、 npm run dev命令
2、webpack.dev.conf.js
3、config/index.js
如果端口正在使用，则将确定一个空闲端口
因为我有启动一个后端项目，所以这个前端的使用了8081
4、webpack.base.conf.js
5、main.js
6、找到自定义组件App.vue
7、流程分析总结
- 1、启动 npm run dev
scripts": {
"dev
- 2、 执行webpack.dev.conf.js
build/webpack.dev.conf.js
- 3、声明connfig下的静态js–配置端口
const config = require('../config')
index.js --> 配置端口
- 4、找到声明webpack.base.conf下的静态js-
const baseWebpackConfig = require('./webpack.base.conf')
- 5、找到main.js
entry: {
app: './src/main.js'
},
- 6、加载app组件
关闭 eslint的验证，在config/index.js文件
module.exports = {
dev: {
useEslint: true,//改为false
}
}
