vue第三天笔记05——使用vue-cli脚手架工具创建一个项目

1.新建文件夹，命名不能是中文

2.打开该文件夹，在该文件夹路径下输入cmd，进入命令行

 

 3.输入下面的命令

vue init 模板名 项目名称(随便取名，要是英文)

模板名有三种：

simple： 只有一个index.html文件，基本没用

webpack：可以使用(大型项目)Eslint 检查代码规范，单元测试

webpack-simple： 个人推荐使用, 没有代码检查

 4.根据提示依次输入三行命令，便可以进入新建的项目

 5.一些注意事项：

（1）在项目执行时，不要关闭cmd命令行，否则会无法打开项目

 解决方法是，重新进入命令行并输入：npm run dev

（2）项目拷贝给别人的时候，需要删除项目里面的node_modules文件夹

 重新下载node_modules的方法是命令行输入：npm install

（3） 移动端需要在index.html里面添加以下代码：

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

6.项目目录介绍： 

1.node-modules文件夹: 放置当前项目所有的依赖
2.src文件夹
（1）App.vue
根组件，相当于<div id="app"></div>内部的内容
（2）assets文件夹(存放静态资源)
images(需要时手动新建)：放置图片
css(需要时手动新建)：放置css文件
js(需要时手动新建)：放置js文件
（3）main.js：全局脚本文件（项目的主入口）
（4）components(需要时手动新建)：放置各种组件(vue文件)
3.index.html：项目的首页
4.data文件夹(存放动态变化的数据，需要时手动新建)
（1）images
动态变化的图片
（2）json文件（里面的图片路径，相对于index.html）
存放动态数据，包括动态变化的图片的路径等
5. .babelrc：用来设置转码的规则和插件
6. .editorconfig：用来定义项目的编码规范
7. .gitignore：用来告诉git，上传项目的时候，忽略哪些文件或文件夹
8.package-lock.json：锁定安装时包的版本号，确保项目给别人时，npm install下载的依赖保持一致
9.package.json：项目及工具的依赖配置文件
10.README.md：项目介绍文档
11.webpack.config.js：打包配置文件
12.dist文件夹：项目打包后自动生成的文件夹