使用vue-cli3.0创建项目
文档地址: https://cli.vuejs.org/zh/guide/prototyping.html
一、使用命令方式创建
1、控制台输入 vue create +你所创建的项目名
2、选择预设(选默认就行)

3、安装完成之后的样子如下

进入到项目目录 cd hello-world
运行项目 yarn serve 或者 npm run serve 控制台显示如下信息

1556420150745.png
在浏览器中输入http://localhost:8080就可以看到页面

1556420221824.png
二、使用视图界面创建项目
安装脚手架 npm install -g @vue/cli 输入 vue -v 检查安装是否成功
运行vue ui 启动图形界面进行创建项目
step1: 输入项目创建的目录

1556418471598.png
step2: 输入项目名称和设置其他配置项

1556418422007.png
step3: 选择预设后,点击创建

进入项目目录运行 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 放置公共的文件
网友评论