使用HBuilderX-普通项目之vue-cli默认项目开发前端(一)

2023-05-16

第一步:新建一个vue-cli-demo项目

一、vue-cli-demo项目目录简介

1、node_modules 这个目录存放的是项目的所有依赖,即 npm install 命令下载下来的文件。

2、public这个目录也许可以顾名思义?

3、src 这个目录下存放项目的源码,即开发者写的代码放在这里。

4、assets 目录用来存放属于该项目的资源文件,里面的文件会被webpack打包。推荐阅读《vue assets和static文件夹的作用》

5、components 目录用来存放组件(一些可复用,非独立的页面)。

6、index.html是主页,项目的入口文件,即浏览器访问项目,最先访问的是index.html文件。

7、App.vue 是根组件,项目的第一个Vue组件,会通过main.js中的实例挂载到index.html文件中,在项目运行时显示出来。

8、main.js相当于Java中的main方法,是整个项目的入口js,会创建一个Vue实例,将App.vue组件挂载到index.html文件中。可以阅读《关于Vue中main.js,App.vue,index.html之间关系进行总结》来了解三者关系。

9、babel.config.js中配置了babel,babel是一个编译器,用来将javascript语法(主要是ES6)编译并生成浏览器兼容的语法(默认是ES5)。简单了解可以阅读《什么是babel,以及各个插件的区别》。

10、package.json 描述模块信息包括对项目的描述,并定义了项目的所有依赖。

11、package-lock.json描述 node_modules 文件中所有模块的版本信息,模块来源及依赖的小版本信息等。简单了解可以阅读《package.json 与 package-lock.json 的区别》

12、postcss.config.js中配置了PostCSS的autoprefixer插件,用来解析CSS文件并且添加浏览器前缀到CSS规则里,使之兼容所有浏览器。

二、运行vue-cli-demo项目

选中vue-cli-demo项目,点击菜单运行->运行到终端->,可以builde项目和serve项目。

1、点击npm run build,会打开终端运行该命令,运行结束后,会生成dist文件夹。

dist文件夹是经过压缩优化后的vue-cli-demo项目,最终放到服务器上的发布版本。

vue-cli本身封装了webpack,所以我们可以使用build命令来压缩vue-cli-demo项目。

2、点击npm run serve,运行命令,运行成功后,我们会获取到项目运行的网址。

3、复制网址到浏览器打开,就能看到vue-cli-demo项目了。

PS:vue-cli官网提供了创建一个默认的hello-word项目的方法,项目目录如下:看起来和HbuilderX的默认项目没多大差别

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用HBuilderX-普通项目之vue-cli默认项目开发前端(一) 的相关文章

随机推荐