《Vue3实战》第二章创建项目和目录结构

待我称王封你为后i 2023-09-25 23:46 78阅读 0赞

《Vue3实战》篇章整体栏目  
—————————————————————————————  
[【第一章】node.js/npm安装、配置][node.js_npm]  
[【第二章】创建项目和目录结构][Link 1]  
[【第三章】基础语法][Link 2]  
[【第四章】条件语句、循环语句][Link 3]  
[【第五章】计算、监听属性][Link 4]  
[【第六章】样式绑定和事件处理][Link 5]  
[【第七章】表单][Link 6]  
[【第八章】自定义指令][Link 7]  
[【第九章】路由][Link 8]  
[【第十章】Element plus指南][Element plus]  
【第十一章】Vue3实战之打造新闻系统前端模板  
—————————————————————————————

#### 目录 ####

*  1、创建项目
 *   *  1.1、命令格式：vue create 项目名称
     *  1.2、运行项目
     *   *  1.2.1、增加run命令
         *  1.2.1、修改启动默认端口
         *   *  1.2.1.1、修改package.json文件
             *  1.2.1.2、修改启动命令
             *  1.2.1.3、修改vue.config.js文件
 *  2、目录结构
 *   *  2.1、 目录说明
     *  2.2、Vue源码

—————————————————————————————

## 1、创建项目 ##

### 1.1、命令格式：vue create 项目名称 ###

vue create vue3_example001

### 1.2、运行项目 ###

npm run serve

#### 1.2.1、增加run命令 ####

启动时想修改命令，例如：

npm run dev

1、找到项目根路径下的package.json文件；  
2、找到【scripts】数据

"scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      }

修改后：

"scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "dev": "vue-cli-service serve"
      }

#### 1.2.1、修改启动默认端口 ####

总结：优先级：方法一>方法二=方法三>方法四  
如果方法二和方法三同时使用，且端口号设置不同，就会报错

##### 1.2.1.1、修改package.json文件 #####

"scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "dev": "vue-cli-service serve --port 81"
      }

修改后再次运行项目，端口号就变更为：81

##### 1.2.1.2、修改启动命令 #####

在运行项目时追加端口号

npm run serve -- --port 81

##### 1.2.1.3、修改vue.config.js文件 #####

在根目录下创建vue.config.js文件（和package.json同一目录）

module.exports = {
        
        devServer:{
        
            port:8090, // 启动端口号
            open:true  // 启动后是否自动打开网页
        }
    }

## 2、目录结构 ##

![在这里插入图片描述][f2d18707a66a453390ad5dd35f722a65.png]

### 2.1、 目录说明 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">目录/文件</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">build</td> 
   <td align="left">项目构建(webpack)相关代码</td> 
  </tr> 
  <tr> 
   <td align="left">config</td> 
   <td align="left">配置目录，包括端口号等。我们初学可以使用默认的。</td> 
  </tr> 
  <tr> 
   <td align="left">node_modules</td> 
   <td align="left">npm 加载的项目依赖模块</td> 
  </tr> 
  <tr> 
   <td align="left">src</td> 
   <td align="left">这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： 1、assets: 放置一些图片，如logo等。2、components: 目录里面放了一个组件文件，可以不用。3、App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 4、main.js: 项目的核心文件。5、index.css: 样式文件。</td> 
  </tr> 
  <tr> 
   <td align="left">static</td> 
   <td align="left">静态资源目录，如图片、字体等。</td> 
  </tr> 
  <tr> 
   <td align="left">public</td> 
   <td align="left">公共资源目录。</td> 
  </tr> 
  <tr> 
   <td align="left">test</td> 
   <td align="left">初始测试目录，可删除</td> 
  </tr> 
  <tr> 
   <td align="left">.xxxx文件</td> 
   <td align="left">这些是一些配置文件，包括语法配置，git配置等。</td> 
  </tr> 
  <tr> 
   <td align="left">index.html</td> 
   <td align="left">首页入口文件，你可以添加一些 meta 信息或统计代码啥的。package.json</td> 
  </tr> 
  <tr> 
   <td align="left">README.md</td> 
   <td align="left">项目的说明文档，markdown 格式</td> 
  </tr> 
  <tr> 
   <td align="left">dist</td> 
   <td align="left">使用npm run build命令打包后会生成该目录。</td> 
  </tr> 
 </tbody> 
</table>

### 2.2、Vue源码 ###

查看Vue工程下面的src/App.vue

<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',
      components: {
        
        HelloWorld
      }
    }
    </script>
    
    <style>
    #app {
        
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

[node.js_npm]: https://blog.csdn.net/s445320/article/details/130107403
[Link 1]: https://blog.csdn.net/s445320/article/details/130108162
[Link 2]: https://blog.csdn.net/s445320/article/details/130198834
[Link 3]: https://blog.csdn.net/s445320/article/details/130200350
[Link 4]: https://blog.csdn.net/s445320/article/details/130200783
[Link 5]: https://blog.csdn.net/s445320/article/details/130200903
[Link 6]: https://blog.csdn.net/s445320/article/details/130213404
[Link 7]: https://blog.csdn.net/s445320/article/details/130213662
[Link 8]: https://blog.csdn.net/s445320/article/details/130110029
[Element plus]: https://blog.csdn.net/s445320/article/details/130197081
[f2d18707a66a453390ad5dd35f722a65.png]: https://img-blog.csdnimg.cn/f2d18707a66a453390ad5dd35f722a65.png