Nodejs

1.安装

地址：https://nodejs.org/zh-cn/

是否安装成功

node -v

阿里镜像（不是必须,也不推荐）

npm install -g cnpm --registry=https://registry.npm.taobao.org

Vue

使用 Vue CLI 创建项目

快速创建项目

1.安装

npm install --global @vue/cli

是否安装成功

vue --version

2.初始化

vue create firstvue

Vue CLI v4.5.9
? Please pick a preset: Manually select features
# default：默认勾选 babel、eslint，回车之后直接进入装包
# manually：自定义勾选特性配置，选择完毕之后，才会进入装包
# 选择manually：手动选择特性，支持更多自定义选项

? Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors
# Babel：es6 转 es5
# Router：路由
# CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等

? Choose a version of Vue.js that you want to start the project with 2.x
# 选择Vue版本

? Use history mode for router? (Requires proper server setup for index fallback in production) No
# 是否使用 history 路由模式，这里输入 `n` 不使用

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
# 选择 CSS 预处理器，这里选择我们熟悉的 Less

? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
# 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 不需要。

3.运行

 # 进入你的项目目录
 cd firstvue
 
 # 启动开发服务
 npm run serve

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

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

调整初始目录结构

这里主要就是下面的两个工作：

• 删除初始化的默认文件
• 新增调整我们需要的目录结构

1、将 App.vue 修改为：

<template>
  <div id="app">
    <h1>XX系统</h1>
    <!-- 路由出口 -->
    <router-view/>
  </div>
</template>

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

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

2、将 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

3、删除默认生成的不相关文件：

• src/views/About.vue
• src/views/Home.vue
• src/components/HelloWorld.vue
• src/assets/logo.png

4、增加以下几个目录

• src/api 目录
  • 存储接口模块
• src/utils 目录
  • 存储一些工具模块
• src/styles 目录
  • index.less 文件，设置全局样式
  • 在 main.js 中加载全局样式 import './styles/index.less'

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

.                                 
├── README.md                     
├── babel.config.js               
├── package-lock.json             
├── package.json                  
├── public                        
│   ├── favicon.ico               
│   └── index.html                
└── src                           
    ├── api
    ├── App.vue                   
    ├── assets                    
    ├── components                
    ├── main.js                   
    ├── router
    ├── utils
    ├── styles               
    └── views