搭建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 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
javascript self对象使用详解
Oct 18 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
React中获取数据的3种方法及优缺点
Feb 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
基于文本的访客签到簿
2006/10/09 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php date()日期时间函数详解
2010/05/16 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python numpy元素的区间查找方法
2018/11/14 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
几个Shell Script面试题
2012/08/31 面试题
工商治理实习生的自我评价
2014/01/15 职场文书
户外拓展活动方案
2014/02/11 职场文书
新学期家长寄语2016
2015/12/03 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
MySql数据库 查询时间序列间隔
2022/05/11 MySQL