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

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

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、目录结构

2.1、 目录说明

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

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>
<!--Vue代码-->
<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>


目录
相关文章
|
3月前
|
JavaScript
如何创建一个Vue项目(手把手教你)
这篇文章是一篇手把手教读者如何创建Vue项目的教程,包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤,并提供了一些常见第三方库的引入方法。
如何创建一个Vue项目(手把手教你)
|
5月前
|
分布式计算 资源调度 JavaScript
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
69 0
|
6月前
|
JavaScript
vue基础教程安装创建项目
vue基础教程安装创建项目
33 0
|
11月前
|
资源调度 JavaScript 前端开发
五分钟教你使用vue-cli3创建项目(三种创建方式,小白入门必看)
五分钟教你使用vue-cli3创建项目(三种创建方式,小白入门必看)
|
11月前
|
JavaScript
【Vue】—项目的目录结构介绍
【Vue】—项目的目录结构介绍
|
12月前
|
缓存 JavaScript 前端开发
Vue系列教程(02)- Vue环境搭建、项目创建及运行
Vue系列教程(02)- Vue环境搭建、项目创建及运行
166 0
|
JavaScript 前端开发
vue-cli 工程目录结构详介绍
vue-cli 工程目录结构详介绍
118 0
|
前端开发
前端学习笔记202304学习笔记第十九天-vue3.0-命令行创建项目
前端学习笔记202304学习笔记第十九天-vue3.0-命令行创建项目
74 0
|
JavaScript IDE 前端开发
【Vue3 第二章】脚手架搭建
【Vue3 第二章】脚手架搭建
206 0
|
JSON 资源调度 JavaScript
学习Vue3 第二章(配置环境)
冷服务 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入
82 0
学习Vue3 第二章(配置环境)