装置 vue-cli
一、须要全局装置 webpack
npm install -g webpack // 装置胜利后输出 `webpack -v` 呈现版本号
npm install webpack webpack-cli -g // 装置 webpack-cli 依赖 运行我的项目时报错: 'webpack' 不是外部或外部命令, 也不是可运行的程序。
报这个错是因为没有全局装置 webpack，解决办法:
1. 确保 nodeJS 已装置。
2. 找到 nodejs 目录, 我的目录是图片上这个, 你的可能不一样, 看下有没有以下两个文件, 没有就新建。
3. 批改全局门路, 须要把默认的安装包门路改成 nodejs 外面这两个新建的文件
配置全局门路：npm config set prefix“D:\soft\nodejs\node_global”
配置缓存门路：npm config set cache“D:\soft\nodejs\node_cache”
留神: 这里的门路是你刚刚新建的文件的门路, 你能够在文件处右击 –> 复制以后门路
4. 批改零碎的环境变量
桌面 –> 我的电脑 –> 右击 属性 –> 高级零碎设置 –> 环境变量 (或者间接关上控制面板)
留神: 装置之后如果没敞开运行窗口, 间接 webpack-v, 还是会报 ’webpack’ 不是外部或外部命令 ……, 肯定要把运行窗口敞开后, 从新关上运行, 我的项目中也是, 先把运行窗口敞开在应用 webpack 的命令. 我装置的时候没敞开窗口, 后果始终报错, 我删了装置了好几遍, 坑。
5.webpack -v 查看时，会提醒必须要装置 webpack-cli，依据提醒执行 y 即可持续装置，也能够执行命令 npm install webpack-cli -g，来装置。我是用持续 y 来装置的，如图：
装置的时候可能有一些 warn 正告, 不影响, 只有装置好包就能够。
二、全局装置 vue-cli
npm install --global vue-cli // 装置实现之后输出 `vue -V` 呈现相应的版本
三、应用 vue-cli 来创立一个基于 webpack 模板的新我的项目
1. 创立：cmd 利用 cd /d E:\2021-5- 4 指令进入到保留我的项目的文件夹下，而后输出命令：vue init webpack
输出命令后，选项阐明：
1. ? Project name todo_list：项目名称，间接回车，依照括号中默认名字（留神这里的名字不能有大写字母，如果有会报错 Sorry, name can no longer contain capital letters）2. ? Project description A Vue.js project：我的项目形容，也可间接点击回车，应用默认名字
3. ? Author galen galen@git.xgqq.com：作者，输出你的小名
4. ? Vue build standalone：5. ? Install vue-router? Yes：是否装置 vue-router，这是官网的路由，大多数状况下都应用，这里就输出“y”后回车即可。6. ? Use ESLint to lint your code? Yes：是否应用 ESLint 治理代码，ESLint 是个代码格调管理工具，是用来对立代码格调的，个别我的项目中都会应用。7. ? Pick an ESLint preset Standard：接下来也是选择题 Pick an ESLint preset (Use arrow keys) 抉择一个 ESLint 预设，编写 vue 我的项目时的代码格调，间接 y 回车
8. ? Set up unit tests Yes：是否装置单元测试，我抉择装置 y 回车
9. ? Pick a test runner jest
10. ? Setup e2e tests with Nightwatch? Yes：是否装置 e2e 测试，我抉择装置 y 回车
11. ? Should we run npm install for you after the project has been created? (recommended) npm：
2. 装置我的项目所须要的依赖：进入新建的我的项目文件夹下，就是上头有一些文件的外面，输出命令：
cnpm install// 目录中 `node_modules` 文件夹，放所有依赖的模块。 四、解释一下每个文件夹
build // 构建脚步目录，保留一些 webpack 的初始化配置
config // 构建配置目录，我的项目初始化的配置，包含端口号等
node_modules //npm 加载的我的项目依赖的模块
src // 源码目录，这里是咱们要开发的目录，基本上要做的事件都在这个目录里
- assets // 资源目录，用来搁置图片，如 logo 等
- components // 组件目录，用来放组件文件
- router //
- app.vue // 是我的项目入口文件
- main.js // 是我的项目的外围文件
static // 文件夹用来搁置动态资源目录，如图片、字体等。
test // 初始测试目录，可删除
.babelrc babel // 编译参数，vue 开发须要 babel 编译
.gitignore // 用来过滤一些版本控制的文件，比方 node_modules 文件夹
index.html // 是首页入口文件，你能够增加一些 meta 信息或统计代码啥。
package.json // 是我的项目配置文件，记录着一些命令和依赖还有简要的我的项目形容信息
README.md // 我的项目的阐明文档，markdown 格局，介绍本人这个我的项目的
五、启动我的项目 npm run dev
如果浏览器关上之后，没有加载出页面，有可能是本地的 8080 端口被占用，须要批改一下配置文件 config 里的 index.js