搭建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 相关文章推荐
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php Ajax乱码
2008/04/09 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
curl和libcurl的区别简介
2015/07/01 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
四风批评与自我批评范文
2014/10/14 职场文书
优秀校长事迹材料
2014/12/24 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python