脚本宝典收集整理的这篇文章主要介绍了

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的版本
    node版本
  3. 如果已经安装过的但是版本过低,请使用后 npm install -g n 来升级node

二、安装Vue-cli

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

初始化一个Vue-cli项目

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

    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的官网进行安装包的下载并安装。安装很简单,只需要一直点击下一步就好。
    vscode官网
  2. 安装完成之后打开vs code
    vs code 界面

二、安装Vue的插件

打开扩展视图
扩展视图

  1. 安装vetur
    安装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

  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 的安装与配置

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过