基于vue-cli创建一个vue项目【vue学习day7】

一、基于vue-cli创建一个vue项目

1.1. 打开cmd窗口，输入如下指令

vue create demo

1.2. 选择自定义安装

image.png

1.3. 一般选择如下配置（Vuex和Router看自己选择）

image.png

• 上下方向键选择功能，空格键选中功能（打上*号）或取消选中
• 这里安装Babel（解决兼容性）
• CSS-Pre-processors安装CSS预处理器。
• 默认选中了Linter/Formater代码规范，取消该选项（因为太严格了，多一个空格都会报错，后面再讲述如何使用）。回车。

1.4. 选择vue版本

image.png

1.5. 这里选择LESS，回车。

image.png

1.6. 这里选择 Babel, ESLint, etc放到独立的配置文件中

进入下一个面板，选择第三方插件的配置文件是独立放还是放package.json里

image.png

1.7. 这里是否将以上选项设置为一个预设，选n，回车

image.png

1.8. 项目创建成提示

image.png

二、运行项目

用vscode打开项目（右键项目文件夹选择用vscode打开，这里是demo-first），查看package.json的script脚本。

image.png

serve是开发阶段要运行的命令（npm run serve）；build是项目开发完要上线时要运行的命令（npm run build） 。

在集成终端执行如下命令

image.png

复制链接打开

image.png

项目运行成功

image.png

三、项目的目录结构

image.png

node_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：包管理配置文件；