vue+element-ui搭建_vue+elementui项目搭建

简介

• Vue-CLI是由Vue提供的一个官方CLI又称Vue脚手架，是一个基于Vue.js进行快速开发的工具，能够自动创建项目必须的项目结构、文件模板和运行环境。

Node.js的安装和配置

使用Vue-CLI需要安装Node.js环境。NPM（Node Package Manager）是随同NodeJS一起安装的包管理工具，能够解决开发JavaScript应用时的包管理的需求（类似于Java中的Maven）。

• 安装Node.js

  安装Nodejs ,在官方下载安装包后，双击安装，没有什么特别的步骤。

  注意：Node.js的版本更新比较快，不要安装最新版，避免兼容性问题。

  安装后，在命令行输入 node -v 和 npm -v 查看版本号

• 配置

  #设置npm管理的包的存储位置，默认在C盘。避免C盘空间不足，设置到其它位置（保证存在相应目录）
  #并将 "D:\nodejs\node_global" 配置到path环境变量中
  >npm config set prefix "D:\nodejs\node_global"
  >npm config set cache "D:\nodejs\node_cache"
  
  #npm 官方源在国内访问很慢，需要使用淘宝的镜像替换npm
  >npm config set registry https://registry.npm.taobao.org
  1
  2
  3
  4
  5
  6
  7

• 安装Vue-CLI脚手架

  #安装vue-cli
  >npm install -g vue-cli
  #查看版本
  >vue --version
  1
  2
  3
  4

• 在Idea中安装Vue.js插件，然后重启Idea

开发使用

1. 新建vue-cli项目

1.#初始化项目 vue init webpack 项目名 
vue init webpack vue-cli-test
#下载模板
- downloading template

2.开始交互式的创建项目
? Project name (vue-cli-test) #确认项目名，回车即可
? Project description (A Vue.js project) #添加项目描述，回车即可
? Author xushy <smarttime@foxmail.com> #确认作者信息，回车
? Vue build (Use arrow keys)
#此处，通过上下键可以选择Runtime+Compiler和Runtime-only，选择第1个即可
> Runtime + Compiler: recommended for most users #回车
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
? Install vue-router? (Y,n) #是否安装vue-router，默认安装，回车
? Use ESLint to lint your code (Y/n) #是否安装ESLint进行代码格式校验，输入n不安装
? Set up unit tests (Y/n)#是否预设单元测试，输入n
? Setup e2e tests with Nightwatch? (Y/n) #是否使用ew2e工具，输入n
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM #回车
Yes, use Yarn
No, I will handle that myself

# Installing project dependencies ...
# ========================
接下来开始下来各种依赖，等待即可...


added 1273 packages from 675 contributors in 114.144s

42 packages are looking for funding
run `npm fund` for details

#以下为成功提示信息
# Project initialization finished!
# ========================

To get started:

cd vue-cli-test
npm run dev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

2. 在项目中添加 element-ui 库

   #进入到项目目录，执行安装element-ui的命令
   cd element-ui-test #进入到项目目录
   npm install element-ui axios vue-axios --save #安装element-ui
   
   1
   2
   3
   4

3. 在main.js中配置 element-ui

   // The Vue build version to load with the `import` command
   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
   import Vue from 'vue'
   import App from './App'
   import router from './router'
   import axios from 'axios'
   import VueAxios from 'vue-axios'
   //引入ElementUI
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   //配置后端服务地址
   axios.defaults.baseURL="http://localhost:8989/show/"
   //在Vue中配置axios，在所有的Vue组件中就可以通过this.axios使用axios库
   axios.defaults.withCredentials = true
   //配置使用ElementUI
   Vue.use(ElementUI)
   Vue.use(VueAxios,axios)
   Vue.config.productionTip = false
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
     components: { App },
     template: '<App/>'
   })
   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27

4. 在项目中使用 element-ui 的组件。