VUE-cli的使用[脚手架]

VUE-cli的使用[脚手架]

一、安装

1.1 npm安装

下载node.js并安装（资料中有msi安装）

安装完后使用命令查看是否安装成功

npm -v

【使用cnpm】

由于网络原因npm比较卡，所以需要安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装步骤：[Node.js安装及环境配置教程 ](https://zhuanlan.zhihu.com/p/508647428#:~:text=1、下载对应你系统的Node.js版本%3A nodejs.org%2Fen%2Fdownload%2F,2、选安装目录进行安装 3、环境配置 4、测试)

安装后可以在cmd中使用 cnpm测试是否安装成功，成功后无法使用cnpm时需要设置环境变量，将cnpm.cmd文件的目录添加到环境变量中。可以在计算机中搜索cnpm.cmd安装地址，然后设置环境变量

1.2 安装vue

全局安装webpack

npm install webpack -g	//当使用该命令安装时不成功，需要去官网下载最新的node.js覆盖之前的node.js目录，然后再执行该命令就可

安装vue

cnpm install vue

全局安装vue/cli 【推荐安装高版本vue-cli，请看1.4】，1.2和1.3可以安装低版本vue/cli

cnpm install --global vue/cli

1.3 创建项目

虽然之前安装cnpm时使用了淘宝镜像，但是在创建vue项目时，会自动使用npm，所以还需要设置npm的淘宝镜像

npm config set registry https://registry.npm.taobao.org

vue init webpack my-project（项目名称）

解决长时间出现downloading template问题

原因：创建项目时会去github.com上下载模板，而github.com可能访问不了

解决办法：先打开浏览器试试能否打开github.com，如果打不开，可以搜索“站长工具 dns”，然后打开该网站输入github.com，看看哪个dns访问速度快，然后修改c:/windows/system32/drivers/etc/hosts文件，在最后添加一行

搜索到的ip地址 github.com

接下来会出现需要确认和设置的内容：

project name my-project

project description A Vue.js project

Author runoob test@runoob.com

Vue build standalone

Use EsLint to lint your code? No

pick an esLint preset Standard

setup unit tests with Karma + Mocha? Yes

setup e2e tests with Noghtwatch? Yes

vue-cli Generated “my-project”

To get started:

cd my-project

npm install

npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpa

接下来进入项目文件夹：cd my-project

然后安装相应的依赖，输入命令：cnpm install

启动项目：cnpm run dev

界面出现：

DONE Compiled successfully in 2424ms

1 Your application is running here：http://localhost:8080

打开浏览器，输入地址：http://localhost:8080 如果出现相应的界面，则表示创建成功

1.4 使用高版本的vue

如果想升级到高版本的vue，可以按如下步骤：

1. 先卸载老的版本

cnpm uninstall -g vue/cli

2. 重新安装

cnpm install -g @vue/cli	//如果报错，可以使用管理员模式运行cmd然后安装

3. 查看vue版本是否正确

vue -v

4. 测试创建项目（每次创建项目的cmd必须是管理员运行的）

vue create hello	//cmd跳转到你要创建项目的目录，然后运行该命令

后面的选择暂时忽略，可以直接选择使用vue2的模式

二、使用

2.1 基本结构

public：html启动页面所在位置

src/assets：静态资源所在位置

src/components：组件所在位置

src/router：路由

src/views：视图

App.vue：主视图

main.js：主js

2.2 安装elementUI

可以直接看2.4使用可视化操作，也可以使用下面命令操作

5. 接下来我们安装element-ui组件（https://element.eleme.cn）

cd demo	//进入项目根目录
npm i element-ui -S	//安装element-ui

6. 完整引入element-ui

安装成功后，打开vue-web/src/main.js文件，添加以下内容

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

这样我们就可以使用Element官网上的组件了

7. 运行项目

cnpm install	//安装依赖
cnpm run serve	//运行项目

2.3 安装axios

cnpm install axios --save-dev

在main.js中修改加入axios相关内容

//注意只加入axios相关内容
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: {App},
    template: '<App/>'
})

也可以直接新建src/plugins文件夹，然后修改main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

然后再plugins文件夹中添加element.js文件

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)

2.4 使用可视化方式创建项目或添加插件

注意：使用此方式安装element-ui插件时，vue.js的版本需要选择2.x(Default)版本，不要选择3.x(preview)版本

打开cmd

在cmd中输入vue ui ，会自动打开浏览器

导入创建的项目（查看1.4）

然后选择插件，搜索并安装插件

三、 WebStorm

可以使用WebStorm来打开项目且操作项目