概述

脚手架 vue-cli为我们省去了手工配置开发环境、运行环境和测试环境的步骤，可以让我们直接步入 Vue.js 开发，不过我们需要先搭建下环境，下面开始吧

安装npm

npm（node package manager）node的包管理工具,网上很多教程，这里不赘述了。

安装成功后，验证如下：

安装vue-cli

使用npm i vue-cli -g将 vue-cli 安装到机器的全局环境中

C:\Users\yangshangwei>npm i vue-cli -g
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\yangshangwei\AppData\Roaming\npm\vue -> C:\Users\yangshangwei\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\yangshangwei\AppData\Roaming\npm\vue-init -> C:\Users\yangshangwei\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\yangshangwei\AppData\Roaming\npm\vue-list -> C:\Users\yangshangwei\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 23.127s

查看vue的版本

C:\Users\yangshangwei>vue --version
2.9.6

建立工程

这里我们用的是webpack-simple模板，它拥有基础功能的 webpack + vue-loader 用于快速原型开发。

还有一套最常用的是webpack，它拥有高级功能的 webpack + vue-loader 用于正式开发：

vue init webpack-simple vue-todos

C:\Users\yangshangwei>vue init webpack-simple vue-todos? Project name vue-todos
? Project description A Vue.js project
? Author yangshangwei <yangshangwei@***.com>
? License MIT
? Use sass? Novue-cli · Generated "vue-todos".To get started:cd vue-todosnpm installnpm run dev

输入的问题，直接“回车”跳过就行了

npm i安装脚手架项目的基本支持包

进入项目目录，

C:\Users\yangshangwei>cd vue-todos

安装脚手架项目的基本支持包

C:\Users\yangshangwei\vue-todos>npm i
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.> uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\yangshangwei\vue-todos\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.jsnpm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})added 802 packages from 570 contributors in 39.189s

npm run dev运行由脚手架构建的基本 Vue.js 程序

C:\Users\yangshangwei\vue-todos>npm run dev> vue-todos@1.0.0 dev C:\Users\yangshangwei\vue-todos
> cross-env NODE_ENV=development webpack-dev-server --open --hotProject is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html

访问 http://localhost:8080/

工程结构

我们导入工程到IDE中，看看 vue-cli 为我们构造了一个什么样的代码结构

Vue2.x-03使用vue-cli搭建Vue开发环境相关推荐

vue + skyline 搭建一个开发环境
1.之前用的是ext + skyline搭建环境 ,正好最近是做前端的事情,有时间用vue + skyline 搭建一个三维场景 2.准备vue 2.x ,UI 用的是iview 和element ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
使用Vue cli创建Vue项目
使用Vue cli创建Vue项目第一步:安装node.js 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装 ...
使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
Spring Boot和Vue的学习(一)--开发环境的安装
前言闲来无事,想学一些框架,查了一些资料,说用前后端分离开发比较主流,同时比较热门的是Spring Boot+Vue开发,久仰大名,现在正好学习一下. 学习视频:4小时学会Spring Boot+V ...
从零开始使用 Webpack 搭建 Vue3 开发环境
从零开始使用 Webpack 搭建 Vue3 开发环境前情提要从零开始使用 Webpack 搭建 Vue 开发环境创建项目首先需要创建一个空目录,在该目录打开命令行,执行 npm init - ...
react安装_「React实战」三分钟搭建React开发环境
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使 ...

Vue2.x-03使用vue-cli搭建Vue开发环境

文章目录

概述