Vue学习（一）

1.nodejs安装

nodejs.cn //安装网址根据机型选择对应的版本安装

下载好后一直下一步就可以了，记下安装路径用于环境变量配置一般放到C://

在phth的环境变量中添加安装好的nodejs目录路径方便在系统的任何地方都能使用nodejs

cmd验证nodejs与npm的版本node -v 与 npm -v

2.常用的dos命令

• cd 打开文件夹

• md创建新文件夹

• dir查看文件夹内容

• cd…返回上一级文件夹

3.npm安装及参数配置

• npm与cnpm的区别：

    cnpm 国内淘宝镜像的npm管理器用于替代国外服务器
  
    npm（node package manager） 是 nodejs包管理器
  

• -g 全局安装（global）

    全局安装（global），可以在命令行下直接使用
    可以通过npm root -g查看全局安装的文件夹位置
  

• 安装命令 ：

    npm install -g vul-cli
  
    cnpm install -g vue-cli
  

• 手动指定从哪个镜像服务器获取资源

    npm install -gd express --registry=http://registry.npm.taobao.org(使用频率不高,只有在安装脚手架的时候才会使用)
    
    为了避免每次安装都需要--registry参数,可以使用如下命令进行永久设置
    
    npm config set registry http://registry.npm.taobao.org    
  

• -S参数 --save 安装包信息加入到dependencies(生产阶段的依赖)

    例如：npm i -g --save --dev vue-cli
    （ctrl+c 终止命令）
  

• -D参数 --save–dev安装包信息将加入到devdependencies（开发阶段依赖）

    npm i -D vue-cli 本地安装(没有-g) 会报错需要：
  
    npm init -f 初始化本地安装配置文件
  
    建议全局安装
    
    或者 npm i -gD vue-cli （-D参数大小写都可以）
  

• i参数是install的缩写

---

4.cnpm安装（下载）–主要使用这种方式

cnpm的镜像使用配置指令

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

验证cnpm是否安装成功 cnpm -v

出现版本号就代表成功了

安装好后通过 cnpm install -gd vue-cli 安装vue-cli2脚手架

检查vue版本命令 vue -V

---

5.创建vue-cli项目

• 命令行创建：vue init webpack （projectName）（如果创建项目失败了，则在当前文件夹中重新安装vue-cli cnpm install -gd vue-cli ）

    init：创建
        
    webpack：模板（一般都是用webpack非常的常用）
  
    （projectName）：项目名称，注意一定要小写
  

• 创建cli过程中部分配置内容

   nstall vue-router?(Y/N)是否安装vue-router,这是官方的路由，大多数要使用
   
   Use ESLint to lint your code? (Y/N) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目都会使用。
   
   npm run dev 启动项目
  

---

6.vue语法学习&说明

【注意】

1、地址栏中的#，是为了防止http频繁请求后台造成压力

2、hash模式：地址栏包含#符号，#以后的内容不会被后台获取

3、history模式：具有对url历史记录进行修改的功能

4、在微信支付、分享url作为参数传递时，#属于特殊符号，不能满足需求

5、history需要后台配合，来处理404的问题

修改为history模式   mode:'history'

6.1单独安装eslint:

安装到生产环境：npm install eslint --save

安装到开发环境：npm install eslint --save-dev

生产环境：package.json中的dependencies

开发环境：package.json中的devDependencies

卸载：npm uninstall eslint --save / npm uninstall eslint --dev    

6.2如何导入vue-cli项目

cd进入到项目中然后npm install安装vue项目依赖

进入后可以先检查是否有vue-cli项目的运行环境，验证npm与vue是否安装即可：

npm -v 和vue -V（注意vue -V V 是大写的）

如果都出现版本号就不需要安装npm依赖直接可以npm run dev

都实现以后就可以直接将项目跑起来