VScode使用与利用vue-cli脚手架新建一个vue项目

VScode使用与新建一个vue项目

  • Vscode打开终端
  • 安装vue-cli
  • 安装webpack
  • 创建新vue项目
  • 运行项目
  • 访问http://localhost:8080/
  • 打包
  • 运行某个页面
  • 在浏览器上运行
  • 快速新建一个html页面
  • 一些常用的插件
  • vue-axios通信
  • Cookie
  • ElementUi
  • VueX
  • Echarts 图表

Vscode打开终端

ctrl+~

安装vue-cli

全局安装vue-cli
npm install -g vue-cli

安装webpack

它是打包js的工具
npm install -g webpack
npm install webpack-cli -g

创建新vue项目

vue init webpack 你的项目名
VScode使用与利用vue-cli脚手架新建一个vue项目_第1张图片

运行项目

npm run dev
VScode使用与利用vue-cli脚手架新建一个vue项目_第2张图片
注意:要进入项目下,即,必须有package.json的目录

访问http://localhost:8080/

VScode使用与利用vue-cli脚手架新建一个vue项目_第3张图片
如上则表示创建vue项目成功

打包

npm run build

运行某个页面

VScode使用与利用vue-cli脚手架新建一个vue项目_第4张图片
VScode使用与利用vue-cli脚手架新建一个vue项目_第5张图片
如果你不想在本地运行,而是想在浏览器运行
这时候你需要安装一个扩展插件
VScode使用与利用vue-cli脚手架新建一个vue项目_第6张图片
然后回到页面,鼠标右键,你就能看到open in default browser
当然你也可以选择other

在浏览器上运行

如果你想在localhost:8080/xxx/xxx.html这样的路径上访问页面
那么你需要配置路由

快速新建一个html页面

首先添加一个文件,然后在空白页上输入英文状态的!然后按tab键,就能看到自动创建的html页面如下
VScode使用与利用vue-cli脚手架新建一个vue项目_第7张图片

一些常用的插件

VScode使用与利用vue-cli脚手架新建一个vue项目_第8张图片
VScode使用与利用vue-cli脚手架新建一个vue项目_第9张图片

vue-axios通信

npm install --save axios vue-axios

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

VScode使用与利用vue-cli脚手架新建一个vue项目_第10张图片

Cookie

依据个人项目情况决定是否下载安装

npm install js-cookie

ElementUi

依据个人项目情况决定是否下载安装

npm i element-ui -S

VueX

依据个人项目情况决定是否下载安装

npm install --save vuex

Echarts 图表

依据个人项目情况决定是否下载安装

npm install echarts --save

你可能感兴趣的:(程序员必备开发工具安装卸载教程,vscode,vue.js)