Vue项目初始化

WaterCup
190 阅读6分钟

1. 使用VueCLI创建项目

如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：

npm install --global @vue/cli

在命令行中输入以下命令创建 Vue 项目：

vue create toutiao-m
Vue CLI v4.3.1
? Please pick a preset:
  default (babel, eslint)
> Manually select features

default：默认勾选 babel、eslint，回车之后直接进入装包

manually：自定义勾选特性配置，选择完毕之后，才会进入装包

选择第 2 种：手动选择特性，支持更多自定义选项

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

分别选择：

  • Babel：es6 转 es5

  • Router：路由

  • Vuex：数据容器，存储共享数据

  • CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等

  • Linter / Formatter：代码格式校验

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

是否使用 history 路由模式，这种模式兼容不好，所以这里输入 n 不使用

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

选择 CSS 预处理器，这里选择我们熟悉的 Less

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

选择校验工具，这里选择 ESLint + Standard config

? Pick additional lint features:
 (*) Lint on save
>(*) Lint and fix on commit

选择在什么时机下触发代码格式校验：

  • Lint on save：每当保存文件的时候

  • Lint and fix on commit：每当执行 git commit 提交的时候

这里建议两个都选上，更严谨。

? Were do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：

  • In dedicated config files：分别保存到单独的配置文件

  • In package.json：保存到 package.json 文件中

这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。

? Save this as a preset for future projects? (y/N) N

这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用。

这里根据自己需要输入 y 或者 n，我这里输入 n 不需要。

✨  Creating project in C:\Users\LPZ\Desktop\topline-m.
�  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

[          ........] - extract:object-keys: sill extract json5@2.1.1

向导配置结束，开始装包。 安装包的时间可能较长，请耐心等待......

⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project topline-m-89.
�  Get started with the following commands:

 $ cd topline-m
 $ npm run serve

安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入：

# 进入你的项目目录
cd toutiao-m

# 启动开发服务
npm run serve
DONE  Compiled successfully in 7527ms


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.10.216:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

启动成功，命令行中输出项目的 http 访问地址。 打开浏览器，输入其中任何一个地址进行访问。

如果能看到该页面，恭喜你，项目创建成功了。

2. 初始目录结构介绍

项目创建好以后，下面我们来了解一下初始目录结构的含义：

.
├── node_modules              第三方包存储目录
├── public                    任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。
│   ├── favicon.ico           浏览器收藏夹图标
│   └── index.html            单页面 HTML 文件
├── src
│   ├── assets                公共资源目录，放图片等资源
│   ├── components            公共组件目录
│   ├── router                Vue Router 路由模块
│   ├── store                 Vue 容器模块
│   ├── views                 视图组件存储目录，所有的路由页面都存储到这里
│   ├── App.vue               根组件，最终被替换渲染到 index.html 页面中 #app 入口节点
│   └── main.js               整个项目的启动入口模块
├── .browserslistrc           指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀
├── .editorconfig             EditorConfig 帮助开发人员定义和维护跨编辑器（或IDE）的统一的代码风格，详情参考这里：https://editorconfig.org/。
├── .eslintrc.js              ESLint 的配置文件
├── .gitignore                Git 的忽略配置文件，告诉Git项目中要忽略的文件或文件夹
├── README.md                 说明文档
├── babel.config.js           Babel 的配置文件
├── package-lock.json         记录安装时的包的版本号，以保证自己或其他人在 npm install 时大家的依赖能保证一致
└── package.json              包说明文件，记录了项目中使用到的第三方包依赖信息等内容

3. 加入 Git 版本管理

几个好处：

  • 代码备份

  • 多人协作

  • 历史记录

  • ...

（1）创建远程仓库

（2）将本地仓库推到线上

如果没有本地仓库。

# 创建本地仓库
git init

# 将文件添加到暂存区
git add 文件

# 提交历史记录
git commit "提交日志"

# 添加远端仓库地址
git remote add origin 你的远程仓库地址

# 推送提交
git push -u origin master

如果已有本地仓库（Vue CLI 已经帮我们初始化好了）。

# 添加远端仓库地址
git remote add origin 你的远程仓库地址

# 推送提交
git push -u origin master

如果之后项目代码有了变动需要提交：

git add 文件
git commit -m "提交日志"
git push

# 如果修改了提交信息，则重新
git push -u 远程仓库 分支信息

4. 调整初始目录结构

默认生成的目录结构不满足我们的开发需求，所以需要做一些自定义改动。

这里主要处理下面的内容：

  • 删除初始化的默认文件

  • 新增调整我们需要的目录结构

修改 App.vue：

<template>
  <div id="app">
    <h1>黑马头条</h1>
    <!-- 路由的出口 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less"></style>

修改 router/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

export default router

删除默认示例文件：

  • src/views/About.vue

  • src/views/Home.vue

  • src/components/HelloWorld.vue

  • src/assets/logo.png

创建以下内容：

  • src/api 目录，存储接口封装

  • src/utils 目录，存储一些工具模块

  • src/styles 目录，存储样式资源

  • index.less 文件，存储全局样式

  • 在 main.js 中加载全局样式 import './styles/index.less'

调整之后的目录结构如下。

.                      
├── public             
│   ├── favicon.ico    
│   └── index.html     
├── src                
│   ├── api            存储 API 请求模块
│   ├── router         Vue Router 路由模块
│   ├── store          Vuex 容器模块
│   ├── styles         存储全局样式资源目录
│   ├── utils          存储工具模块
│   ├── views          存储视图组件
│   ├── App.vue        根组件
│   └── main.js        入口模块
├── .browserslistrc    
├── .editorconfig      
├── .eslintrc.js       
├── .gitignore         
├── README.md          
├── babel.config.js    
├── package-lock.json  
└── package.json
avatar
文章
阅读
粉丝