安装Vue总结

目录

总结：

一、下载安装nodeJS

二、修改全局依赖包以及配置环境变量

三、安装Vue脚手架，创建项目

四、项目文件目录说明

---

总结：

最近简单学习了一下Vue，大致这么理解的。

Vue CLi是脚手架，能为你自动生成工程模板，不再需要复杂的配置，方便开发。但安装Vue CLi的前提是需要 Node 和 Webpack，所以必须要先安装Node。Webpack是一个包管理工具，可以将.vue文件解析打包。npm (Node Package Manager)命令在安装node时自带，是包管理和分发工具。

NodeJS官网： https://nodejs.org/zh-cn/

Webpack很重要，官网： https://webpack.docschina.org/

Vue官网：https://cn.vuejs.org/

Vue脚手架官网： https://cli.vuejs.org/zh/

一、下载安装nodeJS

推荐官网下载地址： https://nodejs.org/zh-cn/download/

傻瓜式安装

二、修改全局依赖包以及配置环境变量

在安装的nodejs文件夹下创建两个文件夹（node_cache / node_global），修改全局依赖包的下载路径

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

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

配置环境变量

增加系统变量配置： NODE_PATH -> D:\Program Files\nodejs\node_global\node_modules

修改用户变量配置： Path -> D:\Program Files\nodejs\node_global

配置完成可以查看 node 和 npm 安装的版本

-> node -v

-> npm -v

安装淘宝镜像

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

三、安装Vue脚手架，创建项目

安装全局脚手架

-> npm install -g @vue/cli

安装完成可以查看vue的安装版本号： -> vue -V

安装的时候可能会报错，其中有一种原因是，需要用管理员权限运行cmd黑窗口，如果遇到解决方法：方法在win中搜索cmd，右击选择管理员运行，再执行命令即可

创建项目

第一种方法：

-> vue create helloworld

第二种方法：

-> vue init webpack vue-demo

创建一个基于 webpack 模板的项目，过程中会有一些选项。

说明：

　　Vue build ==> 打包方式，回车即可；

　　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

　　Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

　　Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

　　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

四、项目文件目录说明

1、build：构建脚本目录 　　

        1）build.js ==> 生产环境构建脚本； 　　

        2）check-versions.js ==> 检查npm，node.js版本；

        3）utils.js ==> 构建相关工具方法；

        4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；

        5）webpack.base.conf.js ==> webpack基本配置；

        6）webpack.dev.conf.js ==> webpack开发环境配置；

        7）webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置

        1）dev.env.js ==> 开发环境变量；

        2）index.js ==> 项目配置文件；

        3）prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

        1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

        2）components：组件目录，我们写的组件就放在这个目录里面；

        3）router：前端路由，我们需要配置的路由路径写在index.js里面；

        4）App.vue：根组件；

        5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、README.md：项目的说明文档，markdown 格式

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

非专业前端，仅作参考。