朝小闇的博客

海上月是天上月,眼前人是心上人

Vue(2.开发环境配置(含node.js))

1.Node.js下载

http://nodejs.cn/download/

  • 直接选择.msi 64位安装包下载并且直接安装即可,安装过程略

image-20200903133908554

  • 注意:选择自动添加到path路径,接着直接往下走不用更改;

image-20200903134106262

  • 检查是否安装成功:
1
2
3
node -v 查看能否正常打印出版本号
npm -v 安装node.js会自动安装npm包,同样查看即可
npm是一个软件包管理工具,用于下载安装

image-20200903142018014


2.安装淘宝镜像加速器(cnpm)

  • cnpm下载国外程序可能无法正常使用,所以一般都使用npm下载,npm下载无用时再使用cnpm
1
2
3
npm install cnpm -g -g是全局安装,建议直接全局安装,安装需要花费一定时间,如果不成功就多次重新安装

npm install --registry=https://registry.npm.taobao.org 或者每次下载时使用此参数可以单词调用加速器

安装之后的路径:C:\Users\Acer\AppData\Roaming\npm\node_modules\cnpm

  • 同时与该加速器同级目录下还需下载其它模板:

image-20200903142549464

3.安装vue-cli

1
cnpm install vue-cli -g 
  • vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;也是接下来主要使用的部分;

  • 主要的功能:

    • 统一的目录结构
    • 本地调试
    • 热部署
    • 单元测试
    • 集成打包上线
  • 安装成功后使用vue list命令可以查看模板:

image-20200903143231971

  • 如果无法显示该目录,则需要重新配置网络,重启电脑或者开启手机热点切换网络再重试,原因是网络问题,可多次重连尝试;

4.使用vue-cli创建vue程序

  • 先切换命令提示符路径至目标路径;
  • 使用命令:
1
vue init webpack myvue 其中myvue为创建文件名
  • 加载一会后会出现一系列相关信息,项目名、项目描述等都可以直接回车,使用默认信息即可,之后作者名可以自己更改,再往后Vue build选项选择第一项即可,之后所有选项直接选择 n,表示我们会手动部署其它文件(选择y就会自动部署);

  • 再进入新文件中:

1
cd myvue
  • 进入之后安装模板依赖:
1
npm install 自动安装固定依赖
  • 接着使用命令:
1
npm run dev 用于部署服务器,每次运行时都需使用该命令部署服务器

image-20200903144930303

  • 部署成功之后可通过端口8080直接访问:

image-20200903145037697

  • ctrl+c可选择关闭服务器;

5.IDEA初步认识文件

  • 使用IDEA打开上述新项目,目录结构如图:

image-20200903145259594

  • 目录结构具体功能:

    • index.html:是程序的主入口,内容不能随意修改:

    image-20200903150423965

    • static:存放静态资源,如css、js、图片等;
    • src:开发项目区域:
      • main.js:入口

    image-20200903150540591

    • package.json:打包时需要构建的版本信息等,不需修改;
    • node_modules:存放之前下载的依赖组件;
    • 其余先不细讲,用到时再看;

6.安装webpack

  • 安装指令:
1
2
npm install webpack -g
npm install webpack-cli -g
  • 测试安装成功:
1
2
webpack -v
webpack-cli -v

image-20200903165916564

7.安装vue-router

  • 安装指令(需要在项目目录下执行):
1
npm install vue-router --save-dev
  • 发生错误按照提示执行指令即可:

image-20200904115933531

  • 成功安装到模板内:

image-20200904120407376

8.npm安装命令详解

  • npm install moduleName :安装模块到项目目录下
  • npm install -g moduleName : -g 的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看npm config prefix的位置
  • npm install -save-dev moduleNam e: –save-dev的意思是将模块安装到项目目录下,并在package文件的devDependencies 节点写入依赖,-D为该命令的缩
  • npm install -save moduleName : –save的意思是将模块安装到项目目录下,并在package文件的dependencies 节点写入依赖,-S为该命令的缩写
-------- 本文结束 感谢阅读 --------