前言：

node.js：
javascript运行时的环境，node.js之于js，等同于jvm至于Java的地位

npm(node package manager):
node.js的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）。可以看成java项目中使用maven管理依赖，下载jar包的功能。

cnpm：

由于npm下载速度较慢，可以选择淘宝镜像,功能一样。

vue:

构建用户界面的渐进式框架

vue-cli :

(vue脚手架) 能帮助你快速开始一个vue项目，其本质就是给你一套文件结构，包含基础的依赖库，让你不需要为编译或其他琐碎的事情而浪费时间，这并不会限制到你的发挥

vue-devtools

基于chrome的插件，用于调试；后面有讲解获取以及简单安装方式

webpack: 
是一个依赖于Node.js环境运行的，现代 JavaScript 应用程序的静态模块打包器(module bundler)。 webpack对前端模块发开发的各个模块相互之间的依赖进行解析，递归构建依赖关系，最终打包成一个或少量的可被浏览器试别的 静态文件。 可以看成maven的打包编译，解析依赖功能。

1、安装node.js，一直下一步即可；

https://nodejs.org/en/

vue项目搭配elementui需要下载的东西

安装完成后，cmd命令窗口进行node –v和 npm -v 命令，查看node和npm版本

注：虽然node自带npm,但不是最新版本，可以进行npm install –g npm 更新到最新，

由于npm安装速度较慢，使用淘宝镜像及其命令 cnpm进行安装，

npm install –g cnpm --registry=https://registry.npm.taobao.org安装淘宝镜像

2、安装Vue 命令cnpm install vue

3、下载vue-cli, cmd输入命令 npm install -g vue-cli , 下载完成后输入vue -V进行检验；

4、初始化项目并下载webpack. vue init webpack +projectName

vue项目搭配elementui需要下载的东西

注意最后一步Should we run npm install for you after the project has been created? (recommended)，选择第三个选项自己创建，否则将陷入漫长等待

选择最后一步后，根据相关提示进行操作；

vue项目搭配elementui需要下载的东西

进入自己项目目录
npm install
运行项目

vue项目搭配elementui需要下载的东西

部分插件

1、vscode应用商店搜索vetur，进行安装，安装完成后重启即可。（vue文件变高亮状态）

we cannot connect to the extensions markeplace at this time 原因：网络不好

2、ESLint 下载： eslint是一个开源的javascript代码检查工具，使用node.js编写，ESLint 的初衷是为了让程序员可以创建自己的检测规则，使其可以在编码的过程中发现问题而不是在执行的过程中。在vue项目中，经常使用eslint对我们的代码进行校验，展示符合规范的代码，方便阅读和搜索。不用不用不用不用不用不用选No

Ctrl+shift+Y呼出控制台，执行npm run dev代表开始运行项目

3安装vue-devtools

链接：https://pan.baidu.com/s/1A8JRINpLY1YdO9uEqXQShw

提取码：y2dy

打开chrome，进入设置，扩展程序，打开开发者模式，将下载的程序直接拖进，

如果这时右上角出现了vue的图标，通过webstrom打开vue项目后，图标变亮，但是报错，控制台没有出现vue调试，原因是用了生产环境的版本或是压缩的vue版本，或是没有勾选：允许访问文件网址

解决方法：5.进入设置，Vue.js devtools4.1.4devtools的详情信息，勾选允许访问文件网址并修改vue的引入

参考博客https://blog.****.net/weixin_39150852/article/details/88181482

vue项目引用elementui

方法：首先安装npm i element-ui -S

在index.js文件里面加入下面代码

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css' (根据版本路径不同会有差异，按照自己版本路径)

Vue.use(ElementUI)

2、 vue项目搭配elementui需要下载的东西

现在使用webpack要同时安装webpack-cli这个包，才可以调用webpack和webpack-dev-server这些命令。
cnpm install webpack webpack-dev-server webpack-cli --save-dev

vue项目搭配elementui需要下载的东西

前言：

相关推荐