一、基于vue-cli创建一个vue项目
1.1. 打开cmd窗口,输入如下指令
vue create demo
1.2. 选择自定义安装
image.png1.3. 一般选择如下配置(Vuex和Router看自己选择)
image.png
- 上下方向键选择功能,空格键选中功能(打上*号)或取消选中
- 这里安装Babel(解决兼容性)
- CSS-Pre-processors安装CSS预处理器。
- 默认选中了Linter/Formater代码规范,取消该选项(因为太严格了,多一个空格都会报错,后面再讲述如何使用)。回车。
1.4. 选择vue版本
image.png1.5. 这里选择LESS,回车。
image.png1.6. 这里选择 Babel, ESLint, etc放到独立的配置文件中
进入下一个面板,选择第三方插件的配置文件是独立放还是放package.json里
image.png
1.7. 这里是否将以上选项设置为一个预设,选n,回车
image.png1.8. 项目创建成提示
image.png二、运行项目
image.png用vscode打开项目(右键项目文件夹选择用vscode打开,这里是demo-first),查看package.json的script脚本。
serve是开发阶段要运行的命令(npm run serve);build是项目开发完要上线时要运行的命令(npm run build) 。
在集成终端执行如下命令
image.png复制链接打开
image.png项目运行成功
三、项目的目录结构
image.pngnode_modules下是所有的第三方包;
public是公共资源文件夹
image.png
favicon是网站的小图标;
index.html是单页面程序的首页,打开看看:
image.png
注释的意思是 生成的文件将会自动被注入到这里。
vue-cli在注释的地方帮我们new了一个Vue的构造函数。
src源代码中的文件
image.png
assets文件夹:存放项目中用到的静态资源文件,例如 css样式表、图片资源;
components文件夹:程序员封装的、可复用的文件;
main.js:是项目的入口文件,整个项目的执行,要执行main.js(webpack配置文件中的entry);
App.vue:是项目的根组件。
.gitignore: git忽略的文件;
babel.config.js:babel配置文件;
package.json:包管理配置文件;
网友评论