Vue安装配置

做笔记用

一、node.js的安装配置

nodejs的安装

1.1官网下载node.js（没FQ时间较长）

官网下载最新版本

1.2 node.js中文网下载（较快）

nodejs中文网下载

按向导默认安装即可，也可更换安装目录到D盘

2.配置默认安装目录和缓存日志目录

2.1创建默认安装目录和缓存日志目录

希望将全模块所在路径和缓存路径，放在node.js安装的文件夹中，则安装的文件夹【"D:\Program Files \nodejs】下创建两个文件夹【node_global】及【node_cache】分别作为默认安装目录和缓存日志目录。

2.2执行命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录：

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

2.3 一些常用命令

2.3.1 查看npm全局安装包保存路径

npm config get prefix查看npm全局安装包保存路径

2.3.2 查看npm装包缓存路径

npm config get cache

2.3.3 查看全局安装目录

npm list -global

2.3.4 查看全局安装目录

npm config list

3.node.js环境配置

• 【系统变量】下新建NODE_PATH，此处设置第三方依赖包安装目录
  如果跟着第2步修改了全局安装目录，则输入【D:\Program Files\nodejs\node_global\node_modules 】
• 【系统变量】下的Path添加上node的安装路径【D:\Program Files\nodejs\】

4. 配置淘宝镜像源

有两种情况，

• 使用npm
• 使用cnpm

4.1 npm

4.1.1临时使用

npm --registry https://registry.npm.taobao.org install cluster

4.1.2 永久使用

npm config set registry https://registry.npm.taobao.org

4.2 cnpm

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

---

二、安装vue及脚手架

安装：npm install vue -g或者cnpm install vue -g
查看安装的vue信息：npm info vue 或者cnpm info vue
查看安装的vue版本：npm list vue
在命令行中运行命令： npm install webpack -g ，然后等待安装完成。
安装脚手架vue-cli： npm install vue-cli -g

vue-cli2创建vue项目

创建项目（最好在cd到D盘的某个位置，即项目的路径，否则项目会新建在C:\Users\Administrator\，也可以直接在想要的项目路径下输入cmd）

vue init webpack 项目名
一些配置

Project name（工程名）:回车(含大写字母给我报错了，我给改了my-vue)
Project description（工程介绍）：回车
Author：作者名 ：回车
Vue build ==> （是否安装编译器）runtime-compiler、 runtime-only 都是打包方式，第二个效率更高；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到路由，所以Y 回车；
Use ESLint to lint your code ==> 是否需要ESLint检测代码，目前我们不需要所以 n 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车；
Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install

按提示代码进入到项目目录下并运行npm run dev
使用浏览器打开localhost:8080 看到Vue网页证明配置成功
结束项目运行：ctrl+c，选择Y即可停止项目的运行。

三、vue项目结构

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 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。
2）components：用来存放自定义组件的目录，目前里面会有一个示例组件。
3）router：前端路由目录，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。
5）main.js：应用的入口文件。主要是引入vue框架，根组件及路由设置，并且定义vue实例，即初始化 Vue 应用并且制定将应用挂载到index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。

5、static

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

6、index.html

首页入口文件，可以添加一些 meta 信息等。 这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，也可以通过 lodash 这种模板语法在这个文件里插值。 注意：这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。

7、package.json

npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、README.md

项目的说明文档，markdown 格式

9、.xxxx文件

这些是一些配置文件，包括语法配置，git配置等
1）.babelrc:babel编译参数
2）.editorconfig:编辑器相关的配置，代码格式
3）.eslintignore : 配置需要或略的路径，一般build、config、dist、test等目录都会配置忽略
4）.eslintrc.js : 配置代码格式风格检查规则
5）.gitignore:git上传需要忽略的文件配置
6）.postcssrc.js ：css转换工具