使用vscode运行第一个vue程序

一、环境安装

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板

1.1安装Node

1,安装Node.js直接官网下载,一路next

cmd中输入node -v,查看是否能够正确打印出版本号即可!

2,安装Node.js淘宝镜像加速器(cnpm)

npm install cnpm -g

1.2安装webpack

npm install webpack -g

npm install webpack-cli -g

测试是否安装成功

webpack -v

1.3安装vue-cli脚手架构建工具

cnpm install vue-cli -g

二、使用vscode初始化一个简单的项目

2.1首先选定目录,然后在命令行中把目录转到选定的目录。执行以下命令:

vue init webpack demo

2.2在安装时会询问你:

(1)Project name demo;项目名称demo。(确定按enter,否按N)
(2)Project description (A Vue.js project);项目描述
(3)Author (wtt1002);作者(wtt1002)。(确定按enter,否按N)
(4)Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render         functions are required elsewhere;(按enter)
(5)Install vue-router? (Y/n);(可安可不安,我按enter)
(6)Use ESLint to lint your code? (Y/n);使用ESlint语法?(Y/ N)。(使用ESLint语法,建议N)
(7)Setup unit tests with Karma + Mocha? (Y/n);设置单元测试?(Y / N)。(建议N)
(8)Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的测试?(Y / N)。(建议N)

2.3通过npm run dev启动项目

npm run dev

2.4按住Ctrl点击URL就可以访问了

使用vscode运行第一个vue程序_第1张图片

你可能感兴趣的:(Web开发)