一直听闻vue.js，今天简单了解了以下，在windows下安装成功
下面不废话了，直接上图
这是效果
首先下载去nodejs官网下载最新的nodejs
以下载windows 64bit msi格式为例
下载好之后，直接点击运行安装
安装目录记住，因为后续配置环境变量会用到，强烈建议，安装任何文件时安装目录不要出现中文
下面是安装好的目录
然后 win+R 打开运行窗口，输入cmd进入dos终端
然后简述一下 vue 的几条 dos 下的命令
cnpm 淘宝官方镜像 http://registry.npm.taobao.org
npm config set registry http://registry.npm.taobao.org
npm install -g vue-cli
npm install -g --save --dev vue-cli
npm install -gD vue-cli
下面先设置
C:\WINDOWS\system32>npm config set registry http://registry.npm.taobao.org
然后安装全局开发这模式的vue-cli
C:\WINDOWS\system32>npm install -gD vue-cli
npm WARN deprecated [email protected]: This package has been deprecated in favour of @vue/clinpm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\91852\AppData\Roaming\npm\vue-list -> C:\Users\91852\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\91852\AppData\Roaming\npm\vue -> C:\Users\91852\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\91852\AppData\Roaming\npm\vue-init -> C:\Users\91852\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
+ [email protected]
added 241 packages from 206 contributors in 108.896s
下面初始化一下
C:\WINDOWS\system32>npm init -f
npm WARN using --force I sure hope you know what you are doing.
Wrote to C:\WINDOWS\system32\package.json:
{
"name": "system32",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
C:\WINDOWS\system32>
这也是下载安装只不过是cnpm方式
npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\WINDOWS\system32>npm install -g cnpm --registry=http://registry.npm.taobao.org
C:\Users\91852\AppData\Roaming\npm\cnpm -> C:\Users\91852\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ [email protected]
added 680 packages from 933 contributors in 202.016s
C:\WINDOWS\system32>
下面简述一下创建vue-cli2项目
以下是具体命令操作
首先在D盘下得创建一个目录vuecli2
D:\>md vuecli2
然后才能下面这个
D:\>cd vuecli2
D:\vuecli2>
D:\vuecli2>vue init webpack testCLI
? Project name testdemo1
? Project description A Vue.js project
? Author zqc
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "testCLI".
# Installing project dependencies ...
# ========================
npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]: Please use the native JSON object instead of JSON 3
npm WARN deprecated [email protected]: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
> [email protected] install D:\vuecli2\testCLI\node_modules\chromedriver
> node install.js
Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file: https://chromedriver.storage.googleapis.com/2.46/chromedriver_win32.zip
Saving to file: C:\Users\91852\AppData\Local\Temp\2.46\chromedriver\chromedriver_win32.zip
Received 781K...
Received 1568K...
Received 2349K...
Received 3136K...
Received 3920K...
Received 4523K total.
Extracting zip contents
Copying to target path D:\vuecli2\testCLI\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at D:\vuecli2\testCLI\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
> [email protected] postinstall D:\vuecli2\testCLI\node_modules\core-js
> node postinstall || echo "ignore"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> [email protected] postinstall D:\vuecli2\testCLI\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1736 packages from 1098 contributors in 471.709s
Running eslint --fix to comply with chosen preset rules...
# ========================
> [email protected] lint D:\vuecli2\testCLI
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"
# Project initialization finished!
# ========================
To get started:
cd testCLI
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
D:\vuecli2>
D:\vuecli2>cd testCLI
D:\vuecli2\testCLI>npm run dev
> [email protected] dev D:\vuecli2\testCLI
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 29/31 modules 2 active ...ndex=0!D:\vuecli2\testCLI\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 6384ms 18:28:36
I Your application is running here: http://localhost:8080然后在浏览器输入localhost:8080
就会出现和在开始的效果图一样
下一篇会出现helloworld
期待！
END
