搭建vscode+vue环境的详细教程


Posted in Javascript onAugust 31, 2020

一、安装vue.js

1.简介

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js是一个MVVM模式的框架,如果读者有angular经验,一定能够很快入门Vue的

vue.js的特点:

易用: 已经会了HTML,CSS,JavaScript?即刻阅读指南即可开始构建应用!

灵活: 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

高效: 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化

2.环境搭建

vue推荐开发环境:

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(http://npm.taobao.org/)
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板

3.安装node.js

从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。
安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。

搭建vscode+vue环境的详细教程

npm包管理器,是集成在node中的,所以,直接输入 npm -v就会如下图所示,显示出npm的版本信息。

搭建vscode+vue环境的详细教程

4.安装cnpm

由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm。

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待,安装完成如下图。

搭建vscode+vue环境的详细教程

完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。

5.安装vue-cli脚手架构建工具

在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

6.用vue-cli构建项目

要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择桌面来存放新建的项目,则我们需要先把目录cd到桌面,如下图。

搭建vscode+vue环境的详细教程

在桌面目录下,在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在桌面生成该文件夹),如下图。

搭建vscode+vue环境的详细教程

运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。

搭建vscode+vue环境的详细教程

打开firstVue文件夹,项目文件如下所示。

搭建vscode+vue环境的详细教程

这就是整个项目的目录结构,其中,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装,如下图。

搭建vscode+vue环境的详细教程

7.安装项目所需的依赖

要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install ,等待安装。

搭建vscode+vue环境的详细教程

安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。

搭建vscode+vue环境的详细教程

安装完依赖包之后,就可以运行整个项目了。

8.运行项目
在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

搭建vscode+vue环境的详细教程

这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。

搭建vscode+vue环境的详细教程

二、安装配置vscode

1.Visual Studio Code编辑器在Windows上安装比较简单,直接setup.exe。安装好后首次启动配置插件,插件配置必须联网,从网上下载。如下图点击左侧扩展:

搭建vscode+vue环境的详细教程

2.配置
文件->首选项->设置

{
 "workbench.iconTheme": "vscode-icons",
 "editor.fontSize": 20,
 "editor.renderIndentGuides": false,
 "files.autoSave": "afterDelay",
 "liveSassCompile.settings.formats":[
  {
   "format": "expanded",
   "extensionName": ".css",
   "savePath": "/css"
  },
  {
   "extensionName": ".min.css",
   "format": "compressed",
   "savePath": "/css"
  }
 ],
 "liveSassCompile.settings.excludeList": [
  "**/node_modules/**",
  ".vscode/**"
 ],
 "liveSassCompile.settings.generateMap": true,
 "easysass.formats": [
  {
   "format": "expanded",
   "extension": ".css"
  },
  {
   "format": "compressed",
   "extension": ".min.css"
  }
 ],
 "easysass.targetDir": "./css/",
 "background.customImages": [
  "file:///D://222.png"
 ],
 "background.useDefault": false,
 "background.style": {
  "content": "''",
  "pointer-events": "none",
  "position": "absolute",
  "z-index": "99999",
  "width": "102%",
  "height": "100%",
  "background-position": "0%",
  "background-repeat": "no-repeat",
  "opacity": 0.3
 },
 "editor.quickSuggestions": {
  "strings": true
 },
 "cssrem.rootFontSize": 12,
 "cssrem.autoRemovePrefixZero": false,
 "cssrem.fixedDigits": 3,
 "beautify.language": {
  "js": {
   "type": [
    "javascript",
    "json"
   ],
   "filename": [
    ".jshintrc",
    ".jsbeautify"
   ]
  },
  "css": [
   "css",
   "scss"
  ],
  "html": [
   "htm",
   "vue",
   "html"
   
  ]
 },
 "workbench.colorTheme": "Dark-Dracula",
 "vetur.format.defaultFormatter.html": "js-beautify-html"
 // "emmet.syntaxProfiles":{
 //  "vue-html":"html",
 //  "vue":"html"
 // },
 // "files.associations": {
 //  "*.vue":"html"
 // },
 // "eslint.validate":["javascript","javascriptreact","html"]
}

三、集成element

安装完nodejs的所有,能正常运行整个项目后,将element集成到项目中的步骤如下:
1.在cmd命令行进入到项目根目录输入cnpm i element-ui -S
2.安装完成之后,package.json文件会增加element-ui依赖

搭建vscode+vue环境的详细教程

3.用完整引入方式在main.js中写入以下内容

搭建vscode+vue环境的详细教程

这里特别注意一点,之前上图标识提到的新增注释掉的语句是不需要注释掉的,他是样式文件,如果注释掉就无法引用此框架样式,之所以安装时出错是里面的路径和网上提供的不一致,实际还是按照自己项目下的路径名来定义,如我的项目下面此框架的样式路径是这样:
element-ui/lib/theme-chalk/index.css

4.可以使用安装依赖 cnpm install
5.最后运行 npm run dev
6.可以测试在App.vue文件添加

搭建vscode+vue环境的详细教程

效果显示

搭建vscode+vue环境的详细教程

到此这篇关于搭建vscode+vue环境的详细教程的文章就介绍到这了,更多相关搭建vscode+vue环境内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
vue组件中实现嵌套子组件案例
Aug 31 #Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 #Javascript
详解vue v-model
Aug 31 #Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 #Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 #Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 #Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 #Javascript
You might like
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
js的三种继承方式详解
2017/01/21 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
Python简单获取自身外网IP的方法
2016/09/18 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
《Python学习手册》学习总结
2018/01/17 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
PyQt5实现画布小程序
2020/05/30 Python
Python中qutip用法示例详解
2020/10/02 Python
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
护士自我评价
2014/02/01 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
2015年司法局工作总结
2015/05/22 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript