Vue CLI图形化介面 自学笔记

Vue CLi安装:
通过配套的图形化界面创建、开发和管理你的项目。

直接至官网按照步骤 https://cli.vuejs.org/zh/

注意Node.js 版本要求Vue CLI 需要 Node.js v8.9 以上的版本。

   npm install -g @vue/cli   #or   yarn global add @vue/cli

开启CLI图形化介面。

   vue ui

等同于直接在cmd使用 npm run server 。

在任务当中:

Serve ：可在本地主机上的本地开发Server中提供服务。有一些数据的呈现如错误日誌和消息、状态、分析、使用的依赖项、速度、资源等，点击停止任务即可终止任务。

Build ：介面与服务与Server大同小异，差别在于它是用于生产环境，也就是在开发环境之后，且会创建一个dist的资料夹，将我们所开发的项目压缩并打包好。

Lint ：检查程式码是否有依照规範去撰写，此处是以eslint标準(预设)处理。

Inspect ：检查我们的webpack设定，对创建项目时隐式为应用程序设置的已解析Webpack配置的检查。

点选启动APP，即可开启我们的专案。

在专案架构中。

src: 即是我们在开发会用到的档案。

public: 也就是公开项目。

components : 用于放置组件的地方。

assets : 用于放置一些会用到的资源。

App.vue : vue副档名，模组化后，利用很多vue档来管理我们的App，而App.vue是根组件。

main.js : 创建Vue的实体。将App.vue档丢进h这个Handler，让他去进行render，完成后再mounted到#app上。

   new Vue({   render: h => h(App),   }).$mount('#app')