本帖最后由 长沙-小知姐姐 于 2019-1-16 09:32 编辑
Java , 前端全网资源链接 : 【长沙校区】集合Java,前端所有基础入门,重点问题一览帖
# vue-cli 快速构建vue项目
## 一、前期准备工作
1. 安装nodejs
2. 查看nodejs和npm的版本
node -v
npm -v
## 二、安装vue-cli
1. 全局安装vue-cli
npm i vue-cli -g
2. 查看版本
vue -V (大写的V)
3. 在桌面初始化项目 (shift + 鼠标右键 ,在此处打开命名窗口,有的是powershell)
vue init webpack 项目名称 (项目的名称不要使用大写)
如:
vue init webpack vue-cms
4. 确认需要安装需求
![](./vue-cli.png)
## 三、安装vue PC端ui ***element-ui***
### 完整引入方式
1. 安装element-ui
npm i element-ui -S
2. 在main.js文件中导入所有的组件
```js import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue';
Vue.use(ElementUI);
```
### 按需引入方式
1. 安装 element-ui 和 babel-plugin-component
npm i element-ui -S
npm install babel-plugin-component -D
2. 在.babelrc文件中
```json { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } } ps: 可能配置完这个文件之后 npm run dev 会报 webpack-dev-server的错误,这个时候直接把node_modules文件删除重新npm i 安装包 ```
3. 在main.js 文件中按需引入组件
```js import { Button } from 'element-ui';
Vue .use(Button)
```
|