基于vscode的vue开发环境搭建

第一步：安装node.js
打开node.js的官网下载地址：http://nodejs.cn/download/
选择适合自己系统的安装包，本文以windows x64系统为例，下载msi安装包，下载安装包后正常安装，可以在安装过程中更换默认安装路径，安装后，打开cmd，分别输入以下指令验证是否成功，显示版本号即为正常安装，其余为异常情况。
>>node -v
>>npm -v
第二步：配置node.js和npm环境变量
安装好之后，对npm安装的全局模块所在路径以及缓存所在路径，进行环境配置。（因为以后在执行类似：npm install express -g（后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到C:\Users\用户名\AppData\Roaming\npm路径中，占C盘空间）。
首先在node.js的安装路径中新建两个文件夹，分别作为缓存文件夹和全局安装文件夹。
node_cache
node_global

在cmd中输入以下指令，设置缓存和全局安装文件夹为上述新建文件夹。请将D:\Program Files\nodejs替换为你自己的node.js的安装路径。
>>npm config set prefix “D:\Program Files\nodejs\node_global”
>>npm config set cache “D:\Program Files\nodejs\node_cache”
打开“环境变量”，新建环境变量：
变量名：NODE_PATH
变量值：D:\Program Files\nodejs;D:\Program Files\nodejs\node_global\node_modules
path变量中新增：
%NODE_PATH%;D:\Program Files\nodejs\node_global
第三步：配置cnpm
通过设置国内淘宝镜像来访问npm。
打开cmd，执行以下指令：
>>npm install -g cnpm --registry=https://registry.npm.taobao.org

检查是否安装成功：
>>cnpm -v

第四步：使用vue-cli脚手架搭建vue开发环境
安装全局vue-cli脚手架，用于帮助搭建vue框架的模板项目。
打开cmd，执行以下指令：
>> cnpm install vue-cli -g
关闭cmd重新打开，执行以下命令，验证vue安装是否成功
>>vue
>>vue -V
第五步：使用webpack打包工具，启动vue项目
创建一个工作空间用于保存项目，比如本文使用D:\workspace\vs_workspace
打开cmd，通过cd指令进入该目录，输入下面指令，创建hellovue项目
>>vue init webpack hellovue
一路回车，除了vue-router选择yes，其余一律no
按照提示，执行后续cmd指令，将提示指令中的所有npm指令全部替换为cnpm指令
>>cd hellovue
>>cnpm install
>>cnpm run dev
不要关闭cmd窗口，根据指令提示，访问网址:http://localhost:8080，可以看到vue的网页
第六步：vscode开发工具安装
在vscode官网下载页面，下载vscode的安装程序，建议选择system版
第七步：vscode集成npm开发vue项目
启动vscode，点击“open folder”，选择刚才利用webpack打包生成的vue项目所在目D:\workspace\vs_workspace\hellovue
通过快捷方式ctrl + `或者View -> Terminal打开控制台
可以通过在Terminal控制台输入指令
>>cnpm run dev
控制vue项目启动
第八步：Vue项目

1、build：构建脚本目录
build.js ==> 生产环境构建脚本；
check-versions.js ==> 检查npm，node.js版本；
utils.js ==> 构建相关工具方法；
vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
webpack.base.conf.js ==> webpack基本配置；
webpack.dev.conf.js ==> webpack开发环境配置；
webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
　　dev.env.js ==> 开发环境变量；
index.js ==> 项目配置文件；
prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
components：组件目录，我们写的组件就放在这个目录里面；
　　router：前端路由，我们需要配置的路由路径写在index.js里面；
　　App.vue：根组件；
　　main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
第九步：vue + element
安装element-ui
>>cd hellovue
>>cnpm i element-ui@2.9.2
建议固定vue和element-ui的版本，避免将来版本升级后产生冲突
引入element-ui
在 main.js 中写入以下内容:
import Element from ‘element-ui’
import ‘element-ui/lib/theme-default/index.css’
Vue.use(Element)
就可以在其他任何页面中使用了。
https://element.eleme.cn/#/zh-CN
https://github.com/ElemeFE
vue 2.9.6
element 2.9.2

基于vscode的vue开发环境搭建相关推荐

基于IDEA的JavaWeb开发环境搭建
基于IDEA的JavaWeb开发环境搭建基于IDEA的JavaWeb开发环境搭建 jdk下载安装配置环境变量下载安装配置环境变量下载安装激活使用IntelliJ IDEA 下载安装激活 ...
Vue 开发环境搭建（Mac 版）
Vue 开发环境搭建(Mac 版) 参考: https://www.jianshu.com/p/cc722eba1f46 https://www.runoob.com/w3cnote/vue2-sta ...
【游戏开发】基于VS2017的OpenGL开发环境搭建
一.简介最近,马三买了两本有关于"计算机图形学"的书籍,准备在工作之余鼓捣鼓捣图形学和OpenGL编程,提升自己的价值(奔着学完能涨一波工资去的).俗话说得好,"工欲善 ...
laravel+vue开发环境搭建
From: https://www.jianshu.com/p/1c2cc11ba46f 描述最近通过laravel在公司做了一些项目,但本身前端出身的我,总是感觉lphp开发过程中,前端写好页面, ...
基于S32K的MBD开发环境搭建
目录 1. 概念简介 1.1 toolbox的下载 1.2 MCD toolbox描述 1.3 MBD toolbox描述 1.4 MCD工具箱和MBD工具箱的关系 1.5 在线调试工具FreeMas ...
轻松玩转树莓派Pico之三、Windows+Ubuntu虚拟机模式下VSCode C语言开发环境搭建
目录 1.VSCode下载与安装 2.VSCode基础插件安装 3.SSH连接与配置 4.SSH免密登录 5.Pico编译工欲善其事,必先利其器.之前的介绍的Pico流程都是通过命令行编译,没有进行 ...
一 vue开发环境搭建
2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运 ...
vue开发环境搭建Mac版
一.前言因工作缘故,需要做一个移动端app,面对2016下半年至今webapp最流行的三个技术React,angular,vue,三选一,如何先,经过前期的技术选型,最后决定使用vue.具体查看本人 ...
Vue开发环境搭建及在docs新建vue项目
参考: https://www.cnblogs.com/winter92/p/7117057.html (写在开头的废话:相信很多人在学习vue这个框架时,最开始搭建开发环境,容易遇到一些大大小小的坑 ...
vue 开发环境搭建
1.创建vue项目 1.node js 生成项目,编译项目 2.hbuilder 开发环境 1.下载安装node js http://nodejs.cn/download/ 确认是否安装成功如果安装 ...

基于vscode的vue开发环境搭建

基于vscode的vue开发环境搭建相关推荐

最新文章

热门文章