Vue 2.x的项目流程

lq_1999

已于 2022-03-22 11:57:26 修改

阅读量964

点赞数

分类专栏： Vue 文章标签： vue git 前端

于 2022-03-21 18:40:41 首次发布

本文链接：https://blog.csdn.net/lq_1999/article/details/123630600

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

环境配置

1、npm: Node.js下的包管理器。

2、webpack: 它主要的用途是通过CommonJS的语法，把所有浏览器端需要发布的静态资源，做相应的准备，比如资源的合并和打包。

3、vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

npm 安装 -- 官网： https://nodejs.org/en/

一般来说 LTC 版本的就够用了，虽然缺少一些最新特性，但版本更稳定

npm 常用命令

1、查看环境变量：echo %PATH%

2、查看node版本： node -v

3、查看npm的本地仓库： npm list –global

4、修改npm的本地仓库：

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

这里修改仓库到d盘，成功

5、编辑系统环境变量

如果将npm 和仓库安装在 D盘（非系统盘），需要配置环境变量

a、修改path: D:\Program Files\nodejs\node_global;

b、新增NODE_PATH：D:\Program Files\nodejs\node_global\node_modules

在 npm 安装插件

在国内直接使用 npm 官方镜像有时会很慢，可以安装淘宝镜像

输入命令：npm config set registry=https://registry.npm.taobao.org

输入命令：npm config list 显示所有配置信息，

我们可以看一下一个配置文件 C:\Users\Administrator\.npmrc

检查镜像站是否正确

输入命令：npm config get registry

安装更新模块，命令：npm install npm –g

a、npm install代表安装更新，第二个npm是指的模块名字

b、 -g：代表安装到global（全局）目录下

查看升级，命令：npm –v

查看global里有什么模块，命令：npm list –global

Vue 的安装和配置

安装 Vue ，命令：npm install vue

安装脚手架vue-cli

检查是否已经安装脚手架，命令： vue -V

如果版本不是现在想要的，可以卸载重新安装

命令：npm uninstall vue-cli -g(这是2点几版本卸载，如果是版本3或4卸载那就是npm uninstall @vue/cli -g)

安装，命令：npm install vue-cli -g ( 2.x版本，3以上是@vue/cli; 如果要指定版本， 2.x的是 vue-cli@版本号； 3以上版本是 @vue/cli@版本号 )

全局安装webpack，命令：npm install webpack -g

安装Git

git的常见命令_lq_1999的博客-CSDN博客

项目创建

（以码云为例）在线上创建仓库，方便开发过程中代码的管理和恢复

在码云创建仓库并关联到本地

创建一个基于 webpack 模板的新项目(my-project: 项目名，自己起名)

命令： vue create webpack my-project

如果已经将同名的Git仓库克隆到本地了，可以直接用该文件夹

切换到项目目录下，安装依赖，然后启动项目，命令：

cd my-project

npm install

npm run dev

项目文件简单介绍

README --项目说明文件
package.json -- 内容是项目安装的依赖包
package-lock.json -- 依赖包的索引文件（版本说明）
index.html -- 模板html 文件
.postcssrc.js -- 对postcss 的配置
.gitignore -- 可以配置不需要通过git 提交到线上的文件
.eslintrc.js -- 说明代码的规范
.eslintignore -- 说明不符合代码规范也不会报格式错误的文件
.editorconfig -- 配置了编译器的一些语法
.babelrc -- 项目写的代码是单文件组件的形式，需要通过babel 做一些语法上的转换，最终变成浏览器可以编译执行的代码
static -- 该文件夹下存放有静态资源，例如json 数据
src -- 该项目的源代码
main.js -- 整个项目的入口文件
App.Vue -- 原始的根组件
router -- 在index.js内配置路由
components -- 放的是项目要用的小组件
assets -- 放的是图片、css之类的资源
node_modules -- 项目依赖的第三方的node 包
build -- 放的是webpack 打包的配置内容
config -- 放的是项目的配置文件
index.js -- 基础的配置信息
dev.env.js -- 开发环境的配置信息
prod.env.js -- 线上环境的配置信息