搭建vscode+vue环境_猫猫猫猫猫大人的博客-CSDN博客_vscode+vue
搭建vscode+vue环境
猫猫猫猫猫大人
于 2018-01-23 13:50:30 发布
163534
收藏
523
分类专栏：
Web
vue
文章标签：
界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mao834099514/article/details/79138484
版权
Web
同时被 2 个专栏收录
6 篇文章
1 订阅
订阅专栏
vue
1 篇文章
0 订阅
订阅专栏
一、安装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，如下图，如果出现相应的版本号，则说明安装成功。
npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。
4.安装cnpm
由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像—cnpm。
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待，安装完成如下图。
完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。
5.安装vue-cli脚手架构建工具
在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。 通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。
6.用vue-cli构建项目
要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。在这里，我选择桌面来存放新建的项目，则我们需要先把目录cd到桌面，如下图。
在桌面目录下，在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在桌面生成该文件夹），如下图。
运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。
打开firstVue文件夹，项目文件如下所示。
这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，如下图。
7.安装项目所需的依赖 要安装依赖包，首先cd到项目文件夹（firstVue文件夹），然后运行命令 cnpm install ，等待安装。
安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。
安装完依赖包之后，就可以运行整个项目了。
8.运行项目 在项目目录中，运行命令 npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。
项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。
二、安装配置vscode 1.Visual Studio Code编辑器在Windows上安装比较简单，直接setup.exe。安装好后首次启动配置插件，插件配置必须联网，从网上下载。如下图点击左侧扩展： 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依赖 3.用完整引入方式在main.js中写入以下内容 这里特别注意一点，之前上图标识提到的新增注释掉的语句是不需要注释掉的，他是样式文件，如果注释掉就无法引用此框架样式，之所以安装时出错是里面的路径和网上提供的不一致，实际还是按照自己项目下的路径名来定义，如我的项目下面此框架的样式路径是这样： element-ui/lib/theme-chalk/index.css
4.可以使用安装依赖 cnpm install 5.最后运行 npm run dev 6.可以测试在App.vue文件添加 效果显示
猫猫猫猫猫大人
关注
关注
74
点赞
523
收藏
打赏
32
评论
搭建vscode+vue环境
一、安装vue.js1.简介Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现
复制链接
扫一扫
专栏目录
搭建vscode+vue环境的详细教程
11-19
一、安装vue.js
关于VScode+Vue项目中统一代码格式化规则总结
最新发布
KasonII的博客
12-02
42
关于VScode+Vue项目中统一代码格式化规则总结，统一项目格式化规则：然后将下面这三个文件放在项目的根目录中（放入项目后在文件名前添加一个点，例如：eslintrc.js 改为 .eslintrc.js）最后将这个下面的json文件内容粘贴到vscode中的setting.json文件中。首先创建项目后，安装babel-eslint插件。.eslintrc.js文件（内容如下）.eslintignore （内容如下）.editorconfig (内容如下)最后重启一下vscode就可以了。
评论 32
您还未登录，请先
登录
后发表或查看评论
vscode搭建vue开发环境(vue入门)
JSH的博客
03-20
1万+
一.安装VScode
从官网下载，安装就行。以下操作在win+r -> cmd 命令行界面讲解，
在vscode中就是在项目空白处右键open in Integrated Terminal(在内部终端中打开)执行即可。
二.安装node.js
从nodejs官网下载。安装就行。
安装完成之后，可以在命令行中输入node -v ，如果出现相应的版本号，则说明安装成功。
npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。
其中npm
VS Code安装VUE及创建VUE项目
weixin_41575632的博客
11-02
272
VS Code 安装vue
使用vs code搭建vue项目1
09-04
首次使用vs code来搭建的vue项目，欢迎大家来查看指正。
VSCode搭建VUE 开发环境
阿彬的专栏
03-26
3万+
1，下载Node.js,去官网https://nodejs.org/en/download/下载
选择Windows Installer (.msi)64位版本
二、安装Node.js
双击下载文件，选择安装路径，安装。
安装完后在cmd中执行 node -v 查看版本
安装完后在cmd中执行 nmp -v
显示如下即表示Node.js安装成功。
三、配置npm的全局模...
如何用vscode运行vue项目（vue环境搭建）
m0_46698214的博客
06-30
2万+
首先，先列出我们在vscode上运行vue项目所需要的东西
1、下载并安装vscode
2、node.js环境（npm包管理器）
3、vue-cli 脚手架构建工具
4、cnpm npm的淘宝镜像
一、下载并安装vscode
在上一篇博客中写过附上地址：
...
基于vscode的vue开发
kessity的博客
06-29
1万+
  Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，是一个基于MVVM结构的轻量级框架，非常容易与其它库或已有项目整合。
  安装vue需要借助npm指令集，所以一般会先安装node.js环境。
一 下载node.js环境
  打开node.js的官网下载地址：http://nodejs.cn/download/
  选择适合自己系统的安装包，本文以windows x64系统为例。
  下载安装包后正
前端编程规范(VSCode + Vue)
重楼的博客
11-18
1793
第一步：退出 VSCode 应用
第二步：输入如下指令，删除 VSCode 的设置和配置
sudo rm -rf $HOME/Library/Application\ Support/Code
第三步：输入如下指令，删除 VSCode 的插件
sudo rm -rf $HOME/.vscode
第四步：从 Application 中移除 VSCode
...
vscode运行vue项目
weixin_42479421的博客
04-24
2万+
朋友搭建了个前端开发框架，如何打开呢？
准备工作
1. 安装node.js和git
2. 检查安装情况，依次输入 node -v 和 npm -v
查看到版本号，则安装成功。
运行
1. 打开用vscode打开vue项目
2. Ctrl+shift+Y呼出控制台，在控制台终端输入npm install 或者 npm i 添加包依赖。
3. 同样在终端 执行npm run dev代表开始运行项目，这条命令会自动在浏览器上运行项目，运行结果如下图所示，代表配置成功了。
使用vscode运行vue项目
洋葱专栏-有灵魂的程序员
02-01
1万+
！！学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目。！！文章参考：https://www.csdn.net/gather_29/OtTagg3sNzA2LWJsb2cO0O0O.html&https://www.jianshu.com/p/80ae9b1b8fae
【如果你和我一样是菜鸟的话，点进来的时候不要被文章长度吓到了，因为我写的特别详细所以看起来篇幅比较长，加上截图比较庞大。我怀疑之前由于截图较小 博客没自动给我加水印，导致文章发不出去，咱就是怀疑，咱也...
VSCode+Vue|用vscode开发vue页面|vue入门
qq_44155199的博客
08-14
1491
vue入门
安装vscode编译器
创建一个文件，命名为 vue.html并且引入vue.min.js
vue.min.js文件如下
/*!
- Vue.js v2.5.17
- (c) 2014-2018 Evan You
- Released under the MIT License.
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"fun
vscode下搭建vue项目
小猪家的胖企鹅的博客
09-10
2306
最近开始学习前端知识，就先从vue开始入手吧，既然要学习，那么环境的搭建是不可缺少的步骤，下面就介绍一下，windows下是如何搭建vue项目的吧！
1.第一步：安装node.js，官网自行百度下载即可，查看node.js是否安装成功，进入cmd命令行输入node -v显示出版本号，就表示安装成功，如下图所示。
2.第二步：安装vue，进入命令行输入vue list，如果没有出现以下信息，则表......
VScode配置Vue环境
moxiao1995071310的博客
07-23
508
1 中文配置
点击这个插件商店 搜索 Chinese
点击install 重启之后就是我们可以操作的中文界面了
2 安装Vetur同上
3 ESLint
4 Auto Close Tag 以及 Auto Rename Tag
5 Path Intellisense 在你输入目录路径时自动补全
6 HTML CSS Support 属性class id等补全
7...
VSCode打开已有vuejs项目
Yoryky的专栏
10-19
5万+
今天公司培训使用VSCode来编写vuejs项目，拿了一个范例来展示，讲的比较快，没怎么听清楚。于是下来自己动手配置一下。下载安装并配置VSCode随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。1、vetur插件的安装该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选
在 Visual Studio Code 中使用 Vue
大强博客
10-28
7685
Vue.js是一个流行的 JavaScript 库，用于构建 Web 应用程序用户界面，Visual Studio Code 内置了对HTML、CSS和JavaScript的 Vue.js 构建块的支持。对于更丰富的 Vue.js 开发环境，您可以安装支持 Vue.js IntelliSense、代码片段、格式等的Vetur扩展。
欢迎使用 Vue#
我们将在本教程中使用Vue CLI。如果您是 Vue.js 框架的新手，您可以在vuejs.org网站上找到很棒的文档和教程。
要安装和使用 Vu.
VSCode 开发Vue必备插件
热门推荐
阿杰
05-19
16万+
工欲善其事，必先利其器
以下就是开发Vue必备插件：
Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）
EsLint —— 语法纠错
Debugger for Chrome —— 映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个）
...
2021-11-3 vscode和vue1
weixin_45207649的博客
11-03
131
1.vscode补全固定格式：英文的!+enter（英文感叹号加回车键）
2.初识vue：
2.1.想让vue工作，就必须创建一个vue实例，且要传入一个配置对象；
2.2.root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法
2.3.root容器里的代码被称为【vue模板】；
3.注意区分：js表达式 和 js代码（语句）
3.1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方
...
使用VsCode搭建Vue开发环境
见证自己学习,成长的记录
09-13
2242
新建文件夹和文件 工作目录叫vue-basic,里面创建一个文件夹叫01-初识vue,然后创建个html文件叫初始vue.html。F12查看控制台 发现多了两个关于vue的提示,就说明引入vue成功了，这两个小提示后面我们会进行关闭，不然开着不舒服。通过官网介绍我们知道，vue是默认开启生产提示的，我们可以修改这个属性为false，这样就能关闭提示。然后我们把控制台的提示进行清除，首先清除第一个，需要去谷歌应用商城安装vue开发者工具。可以发现，不仅名称有区别，大小也是有区别的，开发版本比生产版本大。
vscode + vue 入门学习
ysazt的博客
08-20
788
安装
1.1 需要安装node.js[可以查看vscode工具的学习]
下载地址：https://nodejs.org/en
查看安装的版本：
1.2 安装vue
vue 的使用有俩种方式：
方式1： 直接下载，使用script 导入，
学习的时候建议使用开发版本，部署到服务器上使用生产版本
方式2：npm 安装 （构建大型应用使用）
...
VueCli3全新小白入门教程(vue+fetch+axios)
05-13
本系列课程会从零基础带大家学习Vue, 从最开始的Vue的CDN, 到后面的脚手架, 其中包括fetch, axios, keep-alive, component, mixin, 组件之间的通信等.
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：编程工作室
设计师：CSDN官方博客
返回首页
猫猫猫猫猫大人
CSDN认证博客专家
CSDN认证企业博客
码龄7年
暂无认证
73
原创
18万+
周排名
187万+
总排名
93万+
访问
等级
6813
积分
346
粉丝
301
获赞
134
评论
1501
收藏
私信
关注
热门文章
搭建vscode+vue环境
163529
Qlist的用法
79969
2G、3G、4G网络制式上下行频率、速率比较
71205
JSP九大内置对象的作用和用法总结
33358
CentOS yum有时出现“Could not retrieve mirrorlist ”的解决办法——resolv.conf的配置
29732
分类专栏
ZMQ
2篇
ASN.1
4篇
Source Insight
1篇
嵌入式
1篇
Python
1篇
VirtualBox
2篇
SQL
32篇
C/C++
37篇
Linux
95篇
SqlLite
1篇
Windows
12篇
软件工程
17篇
毕设
1篇
QT
12篇
Protobuf
2篇
Fedora
5篇
Svn
3篇
Shell
23篇
Awk
14篇
数据结构
2篇
信息安全
6篇
Xml
1篇
Android
4篇
Fastdfs
1篇
Redis
12篇
Tomcat
1篇
TeamTalk
15篇
计算机网络
6篇
Web
6篇
Openssl
4篇
libcurl库
3篇
Eclipse
1篇
json
1篇
设计模式
18篇
面试珠玑
3篇
FreeSWITCH
10篇
yum
1篇
DuiLib
6篇
Window
3篇
visual-studio
1篇
MFC
2篇
Log
1篇
Http
3篇
MyEclipse
2篇
大数据
2篇
Java
1篇
ESLint
1篇
Jshint
1篇
ArcGis
1篇
vue
1篇
MUI
1篇
SIP
1篇
算法
4篇
最新评论
ASN.1 -- 使用asn1c完成ASN encode/decode
weixin_39349562:
博主，你好 像请问一下如何通过asn1c工具对V2X的十六进制码流进行正确解码呢？
ASN.1 -- 语法规则与类型概述
硫酸钡:
主要是对前一个明明表示的是值，为何可以在第二个中作为类型出现有疑惑，所示，是不是第二处的类型理解为int，此时与Lottery-number可以表示的值1-49，没有关系
ASN.1 -- 语法规则与类型概述
硫酸钡:
作者大大，想请教下
Lottery-number::= INTERGER(1..49) --表示取1-49任一一个值
这是是不是也表示Lottery-number的类型是int类型，可以用定义的变量 U32 Lottery-number 向里面赋值
Lottery-draw ::=SEQUENCESIZE(6) OF Lottery-number--表示指定了该SEQUENCE类型由6个Lottery-number类型有序组成。在前一个int理解的基础上，是不是也表示可以用定义的 U32 Lottery-draw[6] 为其赋值然后再编码。
hiredis使用简介
qq_35016559:
C接口什么意思呀
CentOS yum有时出现“Could not retrieve mirrorlist ”的解决办法——resolv.conf的配置
Black_Cat_Banana:
解决了，很好用
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
自动驾驶坐标转换-北东地/东北天两种导航坐标系与姿态转换
自动驾驶 规划综述
C++突击面试
2022年7篇
2021年10篇
2020年15篇
2018年10篇
2017年93篇
2016年137篇
2015年13篇
目录
目录
分类专栏
ZMQ
2篇
ASN.1
4篇
Source Insight
1篇
嵌入式
1篇
Python
1篇
VirtualBox
2篇
SQL
32篇
C/C++
37篇
Linux
95篇
SqlLite
1篇
Windows
12篇
软件工程
17篇
毕设
1篇
QT
12篇
Protobuf
2篇
Fedora
5篇
Svn
3篇
Shell
23篇
Awk
14篇
数据结构
2篇
信息安全
6篇
Xml
1篇
Android
4篇
Fastdfs
1篇
Redis
12篇
Tomcat
1篇
TeamTalk
15篇
计算机网络
6篇
Web
6篇
Openssl
4篇
libcurl库
3篇
Eclipse
1篇
json
1篇
设计模式
18篇
面试珠玑
3篇
FreeSWITCH
10篇
yum
1篇
DuiLib
6篇
Window
3篇
visual-studio
1篇
MFC
2篇
Log
1篇
Http
3篇
MyEclipse
2篇
大数据
2篇
Java
1篇
ESLint
1篇
Jshint
1篇
ArcGis
1篇
vue
1篇
MUI
1篇
SIP
1篇
算法
4篇
目录
评论 32
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
猫猫猫猫猫大人
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值