vue-cli安装和vs code 的相关配置
在本文之前,先给大家讲一下接下来需要安装的东西和他们之间的联系。
node
: node是js服务执行的环境,通常我们使用node实现前端的工程化。前端工程化有很多工具可以实现,比如webpack、glup等,他们都是基础node进行开发的。webpack
: webpack是一个前端工程化的工具,我们使用webpack进行Vue项目的模块化管理。Vue
: Vue是一个前端框架,就像以前学习的Juquery框架一样,但是原理和实现和Jquery不同。Vue-cli
: Vue-cli是一个脚手架,,能让你非常容易地构建项目,包含了 Webpack,Browserify,甚至 no build system。
Vue
的安装
一、安装 node.js
- node.js的官网下载node的安装包。
- 安装完成之后打开终端查看node的版本
- 如果已经安装过的但是版本过低,请使用后
npm install -g n
来升级node
二、安装Vue-cli
- 输入命令行:
npm install vue-cli -g
//加 -g 是安装到全局 - 安装完成之后,输入
vue -V
查看Vue的版本
初始化一个Vue-cli项目
- 输入命令:
vue init webpack first
- 输入命令:
cd first
进入first项目下面 - 输入命令:
npm install
来安装项目所需要的模块 - 安装完成时候,输入命令:
npm run dev
运行项目 - 打开浏览器输入:
localhost:8080
查看项目 项目文件配置介绍
1.
config
:这个文件夹下面是这个项目的配置文件
2.node_modules
:项目的依赖模块,也是我们前面用命令npm install
安装的内容
3.src/componets
:放vue文件的地方
4.src/router
:放项目路由的地方。vue-router主要用于不同页面之间的路由跳转
5.app.vue
:项目的根文件,所有的componets下面的 .vue 文件都会渲染到app.vue里面
6.main.js
:项目的入口文件
vs code
的安装
一、下载安装包
- 进入vs code的官网进行安装包的下载并安装。安装很简单,只需要一直点击下一步就好。
- 安装完成之后打开vs code
二、安装Vue的插件
打开扩展视图
安装
vetur
1) 能够实现在 .vue 文件中:语法错误检查,包括 CSS/SCSS/LESS/Javascript/TypeScript
2) 语法高亮,包html/jade/pug css/sass/scss/less/stylus js/ts
3) emmet支持
4) 代码自动补全(目前还是初级阶段),包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript安装
Auto Close Tag
1) 在开始标记的结束括号中键入时自动添加结束标记
2)插入关闭标记后,光标位于开始和结束标记之间
3)设置不会自动关闭的标记列表
4)自动关闭自动关闭标签
5)支持自动关闭标记为Sublime Text 3
6)使用键盘快捷键或命令选项板手动添加关闭标记安装
Auto Rename Tag
重命名一个HTML / XML标记时,会自动重命名配对的HTML / XML标记
安装
VS Color Picker
1)键入颜色值或将插入符号移动到颜色值内后,将自动启动选择器。
2)VS Color Picker在Command Palette(Ctrl + Shift + P或Cmd + Shift + P)中执行命令。
3)绑定命令的键extension.vs-color-picker。
以上,就是vue-cli和vs code 的安装与配置
相关推荐
hline 2020-07-29
不知道该写啥QAQ 2020-07-18
helloxiaoliang 2020-06-21
Macuroon 2020-09-11
xiaodaiwang 2020-06-11
不知道该写啥QAQ 2020-05-17
xiaofanguan 2020-05-11
HeliumLau 2020-05-03
tozeroblog 2020-02-21
webfullStack 2020-02-11
csm0 2020-01-12
yezitoo 2020-01-11
HeliumLau 2019-12-07
学知不足业精于勤 2019-11-30
心动 2019-11-17
王军强 2019-11-17
webfullStack 2019-11-17
Macuroon 2019-11-17