vue-cli安装和vs code 的相关配置

在本文之前,先给大家讲一下接下来需要安装的东西和他们之间的联系。

  1. node: node是js服务执行的环境,通常我们使用node实现前端的工程化。前端工程化有很多工具可以实现,比如webpack、glup等,他们都是基础node进行开发的。
  2. webpack: webpack是一个前端工程化的工具,我们使用webpack进行Vue项目的模块化管理。
  3. Vue: Vue是一个前端框架,就像以前学习的Juquery框架一样,但是原理和实现和Jquery不同。
  4. Vue-cli: Vue-cli是一个脚手架,,能让你非常容易地构建项目,包含了 Webpack,Browserify,甚至 no build system。

Vue的安装

一、安装 node.js

  1. node.js的官网下载node的安装包。
  2. 安装完成之后打开终端查看node的版本
    vue-cli安装和vs code 的相关配置
  3. 如果已经安装过的但是版本过低,请使用后 npm install -g n 来升级node

二、安装Vue-cli

  1. 输入命令行:npm install vue-cli -g //加 -g 是安装到全局
  2. 安装完成之后,输入 vue -V 查看Vue的版本
    vue-cli安装和vs code 的相关配置

初始化一个Vue-cli项目

  1. 输入命令: vue init webpack first
    vue-cli安装和vs code 的相关配置
  2. 输入命令: cd first 进入first项目下面
  3. 输入命令: npm install 来安装项目所需要的模块
    vue-cli安装和vs code 的相关配置
  4. 安装完成时候,输入命令: npm run dev 运行项目
    vue-cli安装和vs code 的相关配置
  5. 打开浏览器输入: localhost:8080 查看项目
    vue-cli安装和vs code 的相关配置
  6. 项目文件配置介绍
    vue-cli安装和vs code 的相关配置

    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 的安装

一、下载安装包

  1. 进入vs code的官网进行安装包的下载并安装。安装很简单,只需要一直点击下一步就好。
    vue-cli安装和vs code 的相关配置
  2. 安装完成之后打开vs code
    vue-cli安装和vs code 的相关配置

二、安装Vue的插件

打开扩展视图
vue-cli安装和vs code 的相关配置

  1. 安装vetur
    vue-cli安装和vs code 的相关配置

    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
  2. 安装Auto Close Tag

    1) 在开始标记的结束括号中键入时自动添加结束标记
    2)插入关闭标记后,光标位于开始和结束标记之间
    3)设置不会自动关闭的标记列表
    4)自动关闭自动关闭标签
    5)支持自动关闭标记为Sublime Text 3
    6)使用键盘快捷键或命令选项板手动添加关闭标记
  3. 安装Auto Rename Tag

    重命名一个HTML / XML标记时,会自动重命名配对的HTML / XML标记
  4. 安装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 的安装与配置

相关推荐