Vue安装示例以及项目结构介绍

Vue安装示例以及项目结构介绍

一、Vue安装流程

1. 打开网址：https://nodejs.org/zh-cn/download/ ，下载node.js

2. node.js安装完成之后，打开cmd，输入npm install -g cnpm --registry=https://registry.npm.taobao.org （安装国内的淘宝镜像代替npm），按回车键。因为npm太慢，所以安装cnpm。现在下载的node.js自带npm和环境变量，不需要安装npm也不需要配置环境变量

如安装npm install -g cnpm --registry=https://registry.npm.taobao.org报错：
Error: EPERM: operation not permitted, rename ‘C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules.make-fetch-happen.DELETE\node_modules@npmcli’ -> ‘C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\make-fetch-happen\node_modules@npmcli’
可能是由于npm低版本导致的，可执行npm i --global npm@8.3.1升级npm版本，然后再执行npm install -g cnpm --registry=https://registry.npm.taobao.org

输入查看版本命令node -v，npm -v，cnpm -v，有版本表示都安装成功
3. 安装vue脚手架（就是vue）：cnpm i –g @vue/cli ，成功之后vue –V查看版本（注意后面是大写的V），有版本就表示安装成功

二、项目结构树形图

├─node_modules      存放项目下载的依赖包
│
├─public                    pubilc中的静态资源在打包时不会被编译
│ │ favicon.ico           网站图标
│ │ index.html           页面入口html文件
│ │
│ └─static                  存放静态资源
│
├─src                         存放项目源码及需要引用的资源文件
│ │
│ ├─api                     封装axios请求方法
│ │         index.js       存放封装的axios方法
│ │
│ ├─assets                 存放项目中需要用到的资源文件，font、images等
│ │ ├─font                 本地字体文件夹
│ │ │         font.css
│ │ │         msyh.ttf
│ │ │         msyhbd.ttf
│ │ │
│ │ └─images           存放图片
│ │
│ ├─axios                  axios请求配置文件
│ │         index.js
│ │
│ ├─components      存放自定义公共组件
│ │ │ index.js            导出所有自定义的公共组件
│ │ │
│ │ └─common         存放封装的公共组件文件夹
│ │                 cascader.vue        级联选择器
│ │                 collapseForm.vue        form表单嵌套折叠面板
│ │                 editor.vue             富文本编辑器
│ │                 pagination.vue            分页
│ │                 select.vue             下拉框
│ │                 table.vue               数据列表
│ │
│ ├─router                   vue路由配置
│ │         index.js                  配置本地路由文件
│ │         router.js                 导出路由
│ │         _import_development.js    开发环境导出路由文件路径
│ │         _import_production.js        生产环境导出路由文件路径
│ │
│ ├─store                     vue的状态管理器
│ │         index.js
│ │
│ ├─styles                    存放项目全局样式的文件夹
│ │         element.scss          element组件样式修改
│ │         export.scss             导出所有样式文件
│ │         index.scss               基础样式文件
│ │         layout.scss              项目页面布局样式文件
│ │         mixin.scss               封装sass函数样式文件
│ │         variable.scss           sass样式变量文件
│ │         views.scss               其他页面样式文件
│ │
│ ├─utils                       存放js文件
│ │         global.js                  存放项目全局变量
│ │         index.js                    按需引入elenemt-ui组件，可减小项目体积
│ │         promission.js           配置动态路由文件
│ │         security.js                 RSA加密方法
│ │         validate.js                存放自定义共通方法
│ │
│ ├─views                       项目视图文件夹（页面都放在此文件夹下面）
│ │
│ ├─App.vue                   项目根组件
│ │
│ └─main.js                     项目入口文件
│
├─eslintrc.js                     Eslint配置文件
│
├─gitignore                     git忽略上传文件后缀名配置文件
│
├─babel.config.js             babel配置文件
│
├─package-lock.json       版本管理文件
│
├─package.json               项目描述及依赖
│
└─vue.config.js                前后端联调跨域，配置反向代理，打包配置文件（修改此文件需要重新启动项目 npm run serve）

vue编辑器推荐使用VSCode，插件安装：Vetur，ESLint，Beautify，Chinese，JavaScript，open in browser

VSCode镜像地址：https://vscode.cdn.azure.cn/stable/3866c3553be8b268c8a7f8c0482c0c0177aa8bfa/VSCodeUserSetup-x64-1.59.1.exe

Vetur：Vue 语法高亮显示, 语法错误检查, 代码自动补全(配合 ESLint 插件效果更佳)
ESLint：检查Javascript编程时的语法错误
Chinese：中文简体语言包
Beautify：格式化代码
JavaScript：es6代码片段
open in browser：在浏览器打开

使用VSCode启动项目，点击文件，选择打开文件夹，选择需要运行的项目文件，点击终端，新建终端，在命令窗口输入cnpm i （刚从git上clone下来的项目是没有node_modules依赖包的，需要安装node_modules文件夹）安装完成后输入命令npm run serve启动项目

如出现报错：无法将“cnmp”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称

则关闭终端，然后以管理员身份打开Windows PowerShell，运行命令set-executionpolicy remotesigned然后输入A回车，再重新打开终端进行操作