2022/12/17 vue cli

vue cli 的作用

目前为止，我们都在使用 script 标签引入 vue 文件，使用单个 html 进行开发，然后在浏览器中打开文件地址进行预览。当我们想开发一个更大的项目时，这样的使用其实很不方便：

1. 缺少 development web serve 开发服务器，目前只是使用 打开一个文件地址，并不是创建一个http或https的网址。
2. 没有热加载，希望更新代码后，浏览器自动更新对应的一部分内容。
3. 代码提示，idea目前没有代码补全和错误提示。
4. 代码拆分只能用不断映入 script 标签，希望可以使用 es6的语法进行导入导出。

这些 vue Cli 都可以帮我们做到！

vue cli 创建并运行项目

// 安装 vuecli
npm install -g @vue/cli
// 使用 vuecli 创建项目
vue create my-project

当我们成功创建了一个vue项目后，我们可以到项目目录下，执行命令运行项目

npm run serve

运行成功后，你将可以在本地 http://localhost:8080/ 访问到你的项目。

项目目录

1. public
   • index.html： 唯一的html文件，我们会在其中app节点挂载vue实例，说明这是一个单页面应用。
2. src：主目录，包含我们写的所有的项目代码，我们将在这个目录下进行开发。
   • main.js: 项目入口，创建一个vue实例并挂载到app节点上。

      import { createApp } from 'vue';
      import App from './App.vue';
      // import HelloWorld from './components/HelloWorld.vue';
      
      const app = createApp(App);
      // 注册组件的方式1
      // app.component('HelloWorld', HelloWorld);
      app.mount('#app');
     
     

   • APP.vue：*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种语言块 <template>, <script> 和 <style>。

     <!-- 此处template就是导出组件的template属性的内容 -->
     <template>
        <img alt="Vue logo" src="./assets/logo.png" />
        <HelloWorld msg="Welcome to Your Vue.js App" />
     </template>
     <script>
       import HelloWorld from './components/HelloWorld.vue';
       export default {
           name: 'App',
           <!-- 注册组件的方式2 -->
           components: {
              HelloWorld,
           },
       };
     </script>
     <style>
        #app {
                ...
            margin-top: 60px;
        }
     </style>