学习vue随笔 Vue CLI 3 项目构建基础

Vue CLI 3 项目构建基础

依赖工具

# 查看 node 版本
node -v

# 查看 npm 版本
npm -v

脚手架vue-cli安装

# 安装 Vue CLI 3.x
npm install -g @vue/cli@3.12.1

构建项目

# my-project 是你的项目名称
vue create my-project

启动

# 打开项目目录
cd vue-project

# 启动项目
yarn serve

# or
npm run serve

目录结构

├── node_modules     # 项目依赖包目录
├── public
│   ├── favicon.ico  # ico图标
│   └── index.html   # 首页模板
├── src 
│   ├── assets       # 样式图片目录
│   ├── components   # 组件目录
│   ├── views        # 页面目录
│   ├── App.vue      # 父组件
│   ├── main.js      # 入口文件
│   ├── router.js    # 路由配置文件
│   └── store.js     # vuex状态管理文件
├── .gitignore       # git忽略文件
├── .postcssrc.js    # postcss配置文件
├── babel.config.js  # babel配置文件
├── package.json     # 包管理文件
└── yarn.lock        # yarn依赖信息文件

可视化界面

vue ui