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

Loong_T 发布于2019-08-23 14:46 / 3285人阅读

摘要：在本文之前，先给大家讲一下接下来需要安装的东西和他们之间的联系。的安装一安装的官网下载的安装包。在或中执行命令。以上，就是和的安装与配置

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

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

超融合服务器私有云 VS Code如何 VS Code 可以在浏览器运行了？微软配置和安装 lamp安装和配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101103.html

用VS Code开发Vue应用

摘要：这是为什么呢因为我们虽然引入了，但是还没有对做设置，我们在项目的根目录下创建一个文件，然后在其中加入再次执行，现在我们看到已经能够起作用了。摘要： 0错误0警告应该是每个程序员最基本的要求。原文：用vscode开发vue应用作者：张京 Fundebug经授权转载，版权归原作者所有。现在用VSCode开发Vue.js应用几乎已经是前端的标配了，但很多时候我们看到的代码混乱不堪，作为一...

zhaofeihao 2019-05-23 16:28 评论0 收藏0
基于vue+mint-ui的mobile-h5的项目说明

摘要：把打包的目录修改成生产环境需要的目录。是域名的配置只要统一配置一项即可，方便。旨在增强团队开发协作提高代码质量和打造开发基石的编码规范，以下规范是团队基本约定的内容，必须严格遵循。 Vue作为前端三大框架之一，其已经悄然成为主流，学会用vue相关技术来开发项目会相当轻松。对于还没学习或者还没用过vue的初学者，基础知识这里不作详解，推荐先去相关官网，学习一下vue相关的基础知识。 a...

vboy1010 2019-08-23 10:25 评论0 收藏0
架构师之路

摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...

NikoManiac 2019-08-22 11:22 评论0 收藏0
搭建自己的前端自动化测试脚手架（一）

摘要：还可以自动完成单元测试的配置，工具选型为准备出发有了以上的初步了解，我们就可以准备着手搭建我们自己的测试环境了，让我们短暂休息一下，下一章见下一篇搭建自己的前端自动化测试脚手架二搭建自己的前端自动化测试脚手架（一） LancerComet at 17:55, 2016.07.17.欢迎转载，转载时还请保留作者署名。随着前端项目规模的日益膨胀，自动化测试越来越受到广大前端与测试朋友关...

luffyZh 2019-05-29 16:57 评论0 收藏0
vue-cli “从入门到放弃”

摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。主要作用：目录结构、本地调试、代码部署、热加载、单元测试在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...

DrizzleX 2019-08-01 17:19 评论0 收藏0