一、学习内容
Vue-CLI
安装脚手架工具:
npm install @vue/cli -g
检查是否安装成功:
vue --version 或者
vue -V
通过脚手架创建项目: (项目名称不能有大写字母)
vue create <project name>
脚手架项目结构解读
3.1在Vue-CLI2.x中生成的项目结构中我们能够看到build文件夹和config文件夹
这两个文件夹中存储了webpack相关的配置, 我们可以针对项目需求修改webpack配置
3.2在Vue-CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹
这么做的目的是为了化繁为简, 让初学者不用关心webpack, 只用关心如何使用Vue
-- node_modules: 存放下载依赖的文件夹
-- public: 存放不会变动静态的文件,它与==src/assets==的区别在于,public目录中的文件不被webpack打包处理,会原样拷贝到dist目录下
-- index.html: 主页面文件
-- favicon.ico: 在浏览器上显示的图标
-- src: 源码文件夹
-- assets: 存放组件中的静态资源
-- components: 存放一些公共组件
-- views: 存放所有的路由(页面级)组件
-- App.vue: 应用根主组件
-- main.js: 应用入口 js
-- .browserslistrc: 指定了项目可兼容的目标浏览器范围, 对应是package.json 的 browserslist选项
-- .eslintrc.js: eslint相关配置
-- .gitignore: git 版本管制忽略的配置
-- babel.confifig.js: babel 的配置,即ES6语法编译配置
-- package-lock.json: 用于记录当前状态下实际安装的各个包的具体来源和版本号等, 保证其他人在 npm install 项目时大家的依赖能保证一致.
-- package.json: 项目基本信息,包依赖配置信息等
-- postcss.confifig.js: postcss一种对css编译的工具,类似babel对js的处理
-- README.md: 项目描述说明的 readme 文件
|