Fork me on GitHub

vue项目开发环境安装教程

JDK安装

1.点击此链接 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 进行下载

2.根据自己的系统选择合适的版本点击下载,以下用 window 版本进行介绍

3.找个合适的盘符下新建以下文件夹便于管理,直接默认安装也行

4.双击下载后的文件如下

5.点击下一步,修改jdk安装目录为刚刚对应新建的目录,也可默认

6.点击下一步,等待安装

7.安装一会,然后跳出修改jre的安装目录

7.点击下一步只等安装完成

JDK环境配置

1.系统变量→新建 JAVA_HOME 变量,变量值填写jdk的安装目录

2.系统变量→寻找 Path 变量→编辑 在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; (注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码)

3.系统变量→新建 CLASSPATH 变量,变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点);系统变量配置完毕

4.检验是否配置成功 运行cmd 输入 java -version (java 和 -version 之间有空格) 若如图所示 显示版本信息 则说明安装和配置成功。

nodejs安装

1.点击 nodejs 进入下载页面,window提供两种下载方式,任选其一下载即可

2.以下提供两种安装方式

安装包方式安装

  • 双击下载后的node-v8.9.0-x64.msi安装包,出现以下界面,点击next

  • 打勾 I accept the terms in the License Agreement,然后点击next

  • 点击change 修改安装目录,尽量不要安装到C盘,选择其他盘时,在根目录建立 nodejs 文件夹,并且选择此文件,便于日后管理

  • 点击 next

  • 点击 Install

  • 等待安装,知道进度100%

  • 出现以下界面,点击 Finish

解压缩包安装

  • 点击 node-v8.9.0-win-x64.zip 解压,并把文件名修改为 nodejs ,便于管理

3.设置环境变量

  • 打开安装的目录或者解压缩后文件目录,选择后复制备用

  • 点击 计算机 ,右键选择 属性,出现以下界面,然后选择 高级系统设置

  • 点击 环境变量 ,出现以下界面

  • 点击 新建 ,出现以下界面,显示新建系统变量,变量名和变量值默认值都是空的,
    变量名设置成:NODE_PATH,全大写
    变量值设置成:L:\nodejs\node_modules,这个值要到 node_modules 目录下,以便日后安装的全局包,可以在命令行直接使用
    设置完点击确定。

  • 然后选择 系统变量下的Path 选项,点击 编辑 ,在变量值最后面追加nodejs安装目录
    直接到 L:\nodejs 就可以了,前面如果没有 ; ,要加上。点击确定则配置完毕

  • 打开 cmd 命令行工具,输入 node -v & npm -v ,如果出现版本号,则安装成功,没有则会提示
    'node'或'npm'不是内部或外部命令,也不是可运行的程序或批处理文件. 这时需要重启电脑或者注销电脑,重新执行以上命令即可

4.nodejs环境变量设置与AppCanIDE安装的环境变量出现问题

  1. 环境变量冲突
  • appcanIDE安装后,默认会增加 NODE_PATHAPPCAN 两个环境变量,同时 APPCAN 环境变量会增加到 Path 值下。以下是默认值,不同安装目录,盘符是不同.
1
2
3
4

NODE_PATH : D:\AppCan\AppCanStudioPersonalV3.3\HDK\emulator\mas\node_modules\
APPCAN : D:\AppCan\AppCanStudioPersonalV3.3\HDK\emulator\mas\;D:\AppCan\AppCanStudioPersonalV3.3\AppCan-IDE\jre\bin\
Path : %APPCAN%
  • 修改 NODE_PATH 的值,把刚刚安装的 nodejsnode_modules 全目录值替换上。即为L:\nodejs\node_modules。修改 APPCAN 的值中 D:\AppCan\AppCanStudioPersonalV3.3\HDK\emulator\mas\; 这段修改为刚刚安装 nodejs 的根目录即为 L:\nodejs\ , 修改后的值即为 L:\nodejs\;D:\AppCan\AppCanStudioPersonalV3.3\AppCan-IDE\jre\bin\ ,Path 则不需要修改了,修改完成后重启电脑或者注销电脑,再次输入命令,测试是否安装成功
  1. Mas项目调试启动时,node模块的缺失
  • AppCan中mas项目运行时需要 java,underscore,phantom,jsdom,lodash,async,ioredis,ldapjs 模块。 此时需要找到 AppCanIDE 默认安装目录下自带 masnode_modules 文件,复制以下模块文件夹到刚刚安装nodejs的 L:\nodejs\node_modules 目录下即可

5.node其他配置

  • npm安装源配置,由于国内网络限制,需要重新配置,利用淘宝镜像源,执行以下命令
1
2
npm config set registry https://registry.npm.taobao.org/
npm config set disturl https://npm.taobao.org/dist
  • npm代理配置,由于东航网络限制,需要配置下,执行以下命令:(注意:不在东航时请把代理去掉)
1
npm config set proxy http://it_linwenbin:ssap1014!@172.31.1.246:8080/
  • npm 在安装模块时,如果需要依赖安装 chromedriver , phantomjs 模块等模块,则需要设置下载路径,否则很难安装成功;同时也把其他相关的镜像地址配置下 ELECTRON_MIRROR , PUPPETEER_DOWNLOAD_HOST , operadriver_cdnurl ,phantomjs_cdnurl , sass_binary_site
    加上 --global 表示全局配置
1
2
3
4
5
6
npm config set chromedriver_cdnurl http://cdn.npm.taobao.org/dist/chromedriver --global
npm config set phantomjs_cdnurl http://npm.taobao.org/mirrors/phantomjs --global
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/ --global
npm config set PUPPETEER_DOWNLOAD_HOST https://storage.googleapis.com.cnpmjs.org --global
npm config set operadriver_cdnurl http://npm.taobao.org/mirrors/operadriver --global
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ --global

执行完后输入 npm config list 查看配置

6.npm安装模块

  • vue-cli全局安装
注意由于目前vue-cli已经升级到3.x版本,安装命令也改变了,如果想在全局安装下兼容2.x以下的版本,需要先删除旧版本,然后再重新安装新版

卸载旧版本的命令:

1
npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载

安装新版本的命令:

1
2
3
npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成后,你还可以用这个命令来检查其版本是否正确 (3.x):

1
vue --version

vue-cli安装成功后,输入 vue -V ,查看版本

Vue CLI 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:

1
2
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
  • 基于Vue CLI 2 (vue-cli),创建webpack模板的项目,输入下面的命令
1
vue init webpack my-project

以下提示介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
? Projects name (my-project)  输入项目的名称
? Projects description 输入项目的介绍
? Author 输入项目的介绍
? Vue build (Use arrow keys) vue构建,上下键选择,回车确定
> Runtime + Compiler: recommended for most users 运行+编译,推荐大多数用户
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .Vue files - render functions are required elsewhere 仅运行
? Install vue-router? (Y/n) 是否安装路由
? Use ESLint to lint your code? (Y/n) 是否利用ESLin检查你的代码,输入Y 提示如下
? Pick an ESLint preset (Use arrow keys) 利用上下键选择ESLint检查规则
> Standard (https://github.com/standard/standard)
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)
? Setup unit tests (Y/n) 是否安装单元测试, 输入y提示如下
? Pick a test runner (Use arrow keys) 选择测试运行器(使用箭头键)
> Jest
Karma and Mocha
none (configure it yourself)
? Setup e2e tests with Nightwatch? (Y/n) 是否使用Nightwatch建立端到端测试

vue-cli · Generated "my-project".

To get started:

cd my-project
npm install
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

  • 进入刚建立的项目执行以下命令,安装依赖
1
2
cd my-project
npm install

正在安装的效果

安装到最后需要安装phantomjs,chromedrive这两个模块需要设置下载地址,上面已经说过

安装到最后会报错,如果报错内容最后是下面截图中内容

则需要重新执行 npm install 再次安装下,成功界面如下

  • 执行 npm run dev 运行,第一次执行会进行全局编译有点慢

  • 在浏览器输入 http://localhost:8080 访问项目效果如下

  • 基于Vue CLI 3,创建webpack模板的项目,输入下面的命令
1
vue create hello-world

安装提示信息介绍:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
Vue CLI v3.0.3
? Please pick a preset: (Use arrow keys) # 选择一个预设配置
default (babel, eslint) # 默认配置
> Manually select features # 自定义配置,此时选择自定义配置

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
# 选择项目所需要的功能(方向键上下移动,空格选中,Enter确定)
> (*) Babel # ES6 to ES5
(*) TypeScript # JS超集
(*) Progressive Web App (PWA) Support # 渐进式Web应用
(*) Router # 路由
(*) Vuex # 状态
(*) CSS Pre-processors # CSS预处理
(*) Linter / Formatter # 代码规范和格式化
(*) Unit Testing # 单元测试
(*) E2E Testing # 端到端测试

? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E

? Use class-style component syntax? Yes # 是否使用class风格的组件方法

? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) Yes # 是否使用Babel做转义

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Yes # 路由模式

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) 选择CSS预处理类型
> Sass/SCSS
Less
Stylus
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
# 选择Sass/SCSS类型的预处理

? Pick a linter / formatter config: (Use arrow keys) # 选择哪种类型的代码规范和格式
> TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
? Pick a linter / formatter config: Standard # 选择ESLint + Standard config

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) # 选择检查模式
> (*) Lint on save # 保存时检查
( ) Lint and fix on commit # 提交时检查

? Pick additional lint features: Lint on save # 这里选择保存时检查

? Pick a unit testing solution: (Use arrow keys) # 选择单元测试方式
> Mocha + Chai
Jest
? Pick a unit testing solution: Mocha # 选择 Mocha 进行单元测试

? Pick a E2E testing solution: (Use arrow keys) # 选择端到端测试方式
> Cypress (Chrome only)
Nightwatch (Selenium-based)
? Pick a E2E testing solution: Cypress

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
# 选择配置信息存放位置,单独存放或者并入package.json
> In dedicated config files
In package.json
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

? Save this as a preset for future projects? Yes # 保存预配置
? Save preset as: default-vue-config # 预配置的名字

安装选择后最后效果:

7.VueJs和Weex相关资料

---------------------------本文结束感谢您的阅读---------------------------
梁磊 wechat
如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!