Vue+Element UI 开发

一、安装npm

nodejs时，会自动安装npm,nodejs官网下载最新的安装包，选择安装目录，安装完成后，打开dos命令，输入node -v命令，会显示安装的nodejs版本，表明安装成功。

在dos命令窗口输入npm -v命令，会显示安装的npm版本。

安装vscode 

下载地址：https://code.visualstudio.com/

 

二、环境配置：

1.更改配置和缓存目录

为方便管理，且减轻系统盘压力（默认会把配置和缓存放到个人文档AppData下），将nodejs的node_global和node_cache转移至nodejs安装目录下。在nodejs安装目录下，创建node_global和node_cache两个文件夹，分别执行如下语句（XXXX指nodejs安装目录）

npm config set prefix "XXXX\node_global"
npm config set cache "XXXX\node_cache"

2.安装vue-cli

可以用npm命令很便捷的安装vue-cl

npm install -g vue-cli 

 

安装完成之后，可以输入命令：vue -V，检查是否安装成功

 

三、Vue项目搭建

1. 使用vue命令，快速创建vue项目

 

使用cd命令，定位到准备新建项目的目录中，然后使用如下命令创建项目(XXX是项目文件夹名称，会自动生成)

vue init webpack XXX

2.安装项目依赖项，并运行项目

使用cnpm install 命令，直接安装依赖项，安装完成后，在项目目录下，会出现一个node_modules依赖包文件夹

执行“cnpm run dev”命令，就会自动打包，生成项目，在浏览器中输入“http://localhost:8080”查看 

 

 

三、vue项目打包

使用npm run build命令进行打包，会成功一个dist目录，如图所示：

打包完成后，放在自己的服务器中运行即可。

 

五、VSCode集成开发Vue项目

1. 打开VSCode管理工具，选择左上角“文件”-“打开文件夹”，弹框选择刚刚创建的Vue项目文件夹，就会将项目加载到工作区，可以很方便的查看和修改项目文件
2. 打开Vue文件时，会发现没有任何颜色格式进行区分标注，需要安装vetur插件，也是在扩展中直接搜索“vetur”进行安装。
3. VSCode集成了终端命令工具，可以直接在VSCode中进行依赖项注入、打包发布等等操作，而不需要在dos命令中执行了。

 

六、在项目中使用element-ui

安装：

 

npm i element-ui -S

 

 

在main.js引入，并使用：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);