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
都实现以后就可以直接将项目跑起来