2021-03-15

Vue的脚手架使用

vue的全家桶:

            vue.js 

            vue-router.js 

            vue-cli (脚手架,快速搭建vue项目)

            axios 

            vuex.js


        vue-cli的安装和使用

            安装: npm i @vue/cli -g

            或者:  npm i "@vue/cli" -g


        检测是否安装vue-cli

            vue -V (注意是大V)

            显示脚手架vue-cli的版本 @vue/cli 4.5.11

        创建项目

            vue create myapp (myapp为自定义项目名)

            选择default(Babel,Eslint)

            Babel: 是一个把ES6+语法转译为低版本浏览器所支持的ES语法的编译工具

            ESlint: 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码


        启动项目:

            1. 进入目录

            2. npm run serve

            3. 在浏览器输入: http://localhost:8000

        项目结构 :

            1. README.md   

            2.  package.json:  (1)有scripts脚本  npm run serve  (2)项目所需的依赖

            3. package-lock.json:  锁定依赖的版本

            4. babel.config.js 了解,是babel在转换es6+代码时的配置

            5. .gitignore: git的忽略文件,指定的文件和目录不会提交到git仓库

            6. node_modules: nodejs的包文件

            7. public

                    (1)favicon.ico : 网站缩略图

                    (2)index.html:  项目中唯一的一个网页,内部有一个#app的div

            8. src: 最重要的文件夹,存储项目的源代码

                (1) main.js : 是整个项目的入口文件

                (2) App.vue:  它是一个vue的单文件组件(只要有.vue文件,即为一个独立的组件,组件中有三个标签: template,script,style)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容