简单介绍
- npm: Nodejs下的包管理器。
- webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
- vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
安装配置
1. Node.js
a. 下载地址：https://nodejs.org/en/
b. 下载安装包，点击安装就一直下一步就可以了。
c. 安装完成后，系统会自动帮你配置系统环境变量，你可以在系统环境变量中path可以看到。
d. 验证：进入docs中查看node.js和npm的版本号
node -v
npm -v
e. 进入C:\Users\admin\AppData\Roaming，可以看到npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动到自己指定的目录。
npm config set prefix "F:\WorkSoftware\Nodejs\node_global"
npm config set cache "F:\WorkSoftware\Nodejs\node_cache"
npm config list --查看所有配置
f. 因为使用npm下载很慢，这时候我们需要配置淘宝镜像站，下载才会快。
npm config set registry=http://registry.npm.taobao.org
注意：
使用 npm -g 安装的时候，默认的模块F:\WorkSoftware\Nodejs\node_modules 目录
将会改变为F:\WorkSoftware\Nodejs\node_global\node_modules目录
2. webpack
安装：
npm install webpack -g
检查版本：
webpack -v
卸载：
npm uninstall webpack -g
3. vue-cli
安装：
npm install vue-cli -g
检查版本： 大写的V
vue -V
卸载：
npm uninstall vue-cli -g
4. 配置环境变量
安装完成后，提示没有vue命令。
增加环境变量NODE_PATH：F:\WorkSoftware\Nodejs\node_global\node_modules
使用脚手架搭建项目
1. 命令
vue init webpack vue-test
2. 过程介绍
Project name vue-test ---项目名称
? Project description 测试 ---项目描述
? Author fangk <fangkai1011@163.com> ---项目作者
? Vue build standalone --- 编译类型，可选
? Install vue-router? Yes ---是否安装页面跳转路由
? Use ESLint to lint your code? Yes ---是否使用ESLint进行代码检查
? Pick an ESLint preset none
? Set up unit tests No ---是否使用单元测试
? Setup e2e tests with Nightwatch? No ---是否使用e2e测试
? Should we run `npm install` for you after the project has been created? (recommended) npm ---打包方式，可选
完成后会以项目名称新建一个文件夹
3. 测试启动
a. 切换到文件夹目录下，cmd窗口。
b. npm run dev
4. 目录解构
image.png
- build：打包工具webpack相关的代码。
- config：项目配置信息，比如端口号、ip等配置。
- node_modules：当前项目安装的所有依赖。
- src：编写代码的文件夹。重要。
- static：静态资源文件，图片、字体等等。
- .babelrc：语法转义的相关配置。
- .index.html：首页
- package-lock.json：npm依赖包的一些信息，pom文件呗
- package.json：每个依赖包的记录，上面lock为详细记录包括下载地址等。
整合Element
切换到项目路径下：npm install element-ui -s
官网-s，回头看看啥意思
官网有如何使用，后续研究
网友评论