1、安装脚手架

Vue CLI官方文档

1.1、下载node.js

下载地址

1.2、安装node.js

方式一 ：安装包 ==> 指定路径下一步即可
方式二 ：压缩包 ==> 但是需要手动配置node.js环境变量

1.3、安装完成之后检查下版本信息

1.4、配置淘宝 NPM 镜像

方式一：安装 cnpm

阿里云 npm 镜像站

方式二：手动配置镜像地址

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

1.5、设置 npm 的默认安装路径

npm config set cache "D:\nodereps\npm-cache"
npm config set prefix "D:\nodereps\npm-global"

1.6、配置环境变量

1.7、查看node.js环境配置

npm config ls
# C:\Users\fan 目录下有个".npmrc"文件，可查看手动配置的信息

2、卸载脚手架

npm uninstall -g vue-cli     # 卸载(1.x 或 2.x)版本脚手架
npm uninstall -g @vue/cli

3、安装相应版本的依赖包

npm install -g vue-cli       # 安装2.x版本脚手架
npm install -g @vue/cli

4、查看 vue 版本

vue --version

5、创建 vue 脚手架项目

5.1、方式一：命令行

vue init webpack 项目名

5.2、方式二：可视化管理工具

vue ui  #cli3.0 新增功能

6、运行前端系统

方式一：命令行（推荐）

# 进入项目目录中运行
cd 项目目录npm run dev  #OR npm run serve

方式二：WebStorm中手动配置

7、访问测试初始界面

8、项目结构总览

├── build              项目打包webpack的配置内容；构建脚本目录
│  ├── build-server.js         运行本地构建服务器，可以访问构建后的页面
│  ├── build.js            生产环境构建脚本
│  ├── dev-client.js          开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│  ├── dev-server.js          运行本地开发服务器
│  ├── utils.js            构建相关工具方法
│  ├── webpack.base.conf.js      wabpack基础配置
│  ├── webpack.dev.conf.js       wabpack开发环境配置
│  └── webpack.prod.conf.js      wabpack生产环境配置
==================================================
├── config             项目配置文件
│  ├── dev.env.js           开发环境配置信息
│  ├── index.js            基本配置信息
│  ├── prod.env.js           生产环境配置信息
│  └── test.env.js           测试环境配置信息
==================================================
├── node_modules              项目依赖第三方node包（不用管）=========================src目录为开发核心=========================
├── src               项目源码目录
│  ├── assets             资源目录（图片...），这里的资源会被wabpack构建
│  │  └── images
│  │    └── logo.png
│  ├── components           公共组件目录
│  │  └── title.vue
│  ├── routes             前端路由
│  │  └── index.js
│  ├── store              应用级数据（state）状态管理
│  │  └── index.js
│  └── views              页面目录
│    ├── hello.vue
│    └── notfound.vue
│  ├── App.vue             最原始的根组件
│  ├── main.js             主入口js文件
=========================src目录为开发核心=========================├── static             纯静态资源，不会被wabpack构建。
│  └── mock              mock数据目录
│  │  └── hello.js
└── test              测试文件目录（unit&e2e）└── unit              单元测试├── index.js            入口脚本├── karma.conf.js          karma配置文件└── specs              单测case目录└── Hello.spec.js
├── .babelrc           babel配置。"balel可以将vue的单文件组件的写法转换成浏览器能够编译执行的代码"
├── .editorconfig           编辑器语法配置文件
├── .gitignore           git忽略文件
├── .postcssrc.js           对postcssrc的配置项
├── index.html           默认首页模板文件，入口页面
├── LICENSE           开源协议说明
├── package-lock.json           npm包锁文件，确定依赖包的版本
├── package.json            npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── README.md           项目介绍

8.1 详细介绍

将vue初始化自带的无用文件删除后的src目录结构（pages目录及其以下文件是自己所创建的）

main.js

// 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' //自动引入router文件夹下的index.js文件Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',// router: router, //ES6 语法，键值相同，可以省略router, //路由就是根据网址不同，返回不同的内容给用户// components: { App: App }, //ES6 语法，键值相同，可以省略components: { App }, template: '<App/>'
})

App.vue

<template><div id="app"><!-- router-view 显示当前路由地址所对应的内容 --><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import List from '@/pages/list/List'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home}, {path: '/list',name: 'List',component: List}]
})

9、安装 axios

axios 参考地址

9.1 切换到项目根目录，npm 安装axios

npm install axios --save

9.2 打开项目src目录下的main.js，全局引入axios

import axios from 'axios'Vue.prototype.$axios = axios

组件中，我们就可以通过 this.$axios.get() 来发起我们的请求了

10、安装 element-ui

Element 官网

10.1 切换到项目根目录，npm 安装 element-ui

npm i element-ui -S

10.2 打开项目src目录下的main.js，引入element-ui依赖

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

11、打包与部署

11.1 打包

#在根目录下（包含package.json的文件夹）打包
npm run build

打包后的文件结构

11.2 部署

11.3 根据配置文件设置路径

Vue前端开发环境搭建相关推荐

Linner和WebStorm前端开发环境搭建
Linner和WebStorm前端开发环境搭建注意: 1. Jdk1.6以上 2. 数据库推荐用MySQL 以下是前端工厂开发环境搭建,主要用到Lin ...
dashboard windows 前端开发环境搭建
dashboard是kubernetes的云管平台UI界面,正常情况下,其是在linux下开发的,但是,有些特殊情况下,我们也可能希望在windows上搭建起dashboard的开发环境这里我们将搭 ...
Web前端开发环境搭建
最近在学习前端开发,通过网上的查找资料和自身实践:完成了前端开发环境的简单搭建.但发现网上提供的搭建方法总有些不全,因此把自己的搭建过程分享一下,希望能为web开发入门者提供帮助,少走弯路. 搭建的环 ...
Vue.js学习总结（1）——Windows下Vue.js开发环境搭建
Vue.js是一套构建用户界面的 "渐进式框架".与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已 ...
vue框架开发环境搭建
说明该文章用最简单粗暴的方式完成vue框架的搭建,跟着步骤一步一步来就ok,这里就不阐述什么原理了,直接开工. 第一步:下载并安装Node.js 安装包请移步Node中文官网,直接点我进去找就行打 ...
前端开发环境搭建（工具使用）
迅雷用于之后下载一些安装包,速度较快命令行工具 shift + 鼠标右键:在此处打开powershell node + 文件名: 在node中执行文件输入部分文件名 + Tab: 自动补全文件名 ...
linux环境前端开发环境搭建,Linux运维知识之linux 前端环境搭建
本文主要向大家介绍了Linux运维知识之linux 前端环境搭建,通过具体的内容向大家展现,希望对大家学习Linux运维知识有所帮助. 1.下载node.js 2.在linux 里使用wget命令 w ...
Vue.js开发环境搭建的介绍
包含了最基础的Vue.js的框架,包含了打包工具和测试工具,开发调试的最基本的服务器,不需要关注细节,只需关注Vuejs对项目的实现 npm在国内的网络使用较慢,所以推荐下载安装淘宝的镜像 1: 2: ...
vue.js开发环境搭建
环境准备 Node.js Javascript的运行时环境 npm Node.js下的包管理工具 webpack 前端资源模块化管理和打包工具 vue-cli 脚手架构建工具 cnpm npm的淘宝镜 ...
grunt 前端开发环境搭建
1.找管理员开通gitlab权限 2.下载并安装git工具 3.下载并安装nodejs 4.安装cnpm 5.安装kulor-cli cnpm install -g kulor-cli cnpm in ...

Vue前端开发环境搭建