vscode npm install 安装_使用VSCode创建第一个VUE项目

VSCode

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

Vue

Vue.js 是目前最火的一个前端框架，它和Angular.js、React.js 一起，并成为前端三大主流框架。Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发)，前端的主要工作，主要负责MVC中的V这一层，主要工作就是和界面打交道，来制作前端页面效果。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

软件安装

1. 安装vscode

从官网https://code.visualstudio.com/Download直接下载，根据自己的电脑操作系统选择不同的版本。此文以Windows为例。

2. 安装nodejs

此文默认你已经有nodejs环境

安装插件

1. 点击左边的Extensions图标(快捷键Ctrl+Shift+X)，输入`vetur`，找对对应版本然后点击install即可。

2. 按照同样方法查找`ESLint`插件，并安装。

3. 使用npm安装vue-cli：`npm install -g vue-cli`

4. 使用npm安装webpack：`npm install -g webpack`

使用脚手架创建vue项目

1. 选择菜单`Terminal`->`New Terminal` 打开一个新的命令行窗口(快捷键Ctrl+Shift+`)

2. 选择你想要创建新项目的目录，然后执行命令`vue init webpack vuedemo`，此过程会先进行一些配置，根据自己的情况进行配置

? Project name vuedemo? Project description A Vue.js project? Author fancyebai 163.com>? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Set up unit tests Yes? Pick a test runner jest? Setup e2e tests with Nightwatch? Yes? Should we run `npm install` for you after the project has been created? (recommended) npm

3. 安装过程会持续一段时间，如果最后出现`Project initialization finished!`，则说明安装成功

4. 切换到项目目录`cd vuedemo`

5. 最后执行命令`npm run dev`

6. 其他命令，`npm run build`用户构建生产包，`npm run start`

7. 打开浏览器输入`http://localhost:8080`，如果出现vue的欢迎页面则说明成功

最后推荐

推荐一个练手项目`vueAdmin-template`，github地址为`https://github.com/PanJiaChen/vueAdmin-template#vueadmin-template`，下篇文章再介绍。