使用vue-cli3脚手架创建项目
2019-05-13 本文已影响1人
涅槃no重生
使用vue-cli3.0创建项目
文档地址: https://cli.vuejs.org/zh/guide/prototyping.html
一、使用命令方式创建
1、控制台输入 vue create +你所创建的项目名
2、选择预设(选默认就行)
![](https://img.haomeiwen.com/i8489743/3a2ba0d606adfdc8.png)
3、安装完成之后的样子如下
![](https://img.haomeiwen.com/i8489743/5b54fa9340abc166.png)
进入到项目目录 cd hello-world
运行项目 yarn serve 或者 npm run serve 控制台显示如下信息
![](https://img.haomeiwen.com/i8489743/e79dc2268679155d.png)
1556420150745.png
在浏览器中输入http://localhost:8080就可以看到页面
![](https://img.haomeiwen.com/i8489743/dbc532b11117adba.png)
1556420221824.png
二、使用视图界面创建项目
安装脚手架 npm install -g @vue/cli 输入 vue -v 检查安装是否成功
运行vue ui 启动图形界面进行创建项目
step1: 输入项目创建的目录
![](https://img.haomeiwen.com/i8489743/d7965fa0fdd5a248.png)
1556418471598.png
step2: 输入项目名称和设置其他配置项
![](https://img.haomeiwen.com/i8489743/e92adbaea7c61477.png)
1556418422007.png
step3: 选择预设后,点击创建
![](https://img.haomeiwen.com/i8489743/7ab0937e0998dec8.png)
进入项目目录运行 npm run serve 启动项目
其他设置
在图形界面中启动项目
在图形界面中安装项目需要的依赖
vue.config.js配置webpack
vue inspect (在控制台查看)
veu inspect > out.js (把配置输出到out.js)
项目目录解构
package.json
babel.config.js 编译es6用的,把es6转变成js5
.gitignore git忽略的文件或文件夹
src 源代码存放的地方
public 放置公共的文件