使用npm或cnpm来安装
npm安装:
node的配置:
registry=https://registry.npmmirror.com
prefix=D:/nodejs/node-global
cache=D:/nodejs/node-cache
npm install -gd vue-cli --registry=https://registry.npmmirror.com
如果npm源太慢的话,使用cnpm代替npm
首先先安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
但安装cnpm会有一个坑,它会直接安装最新版的cnpm,如果cnpm和node版本不兼容的话,就很尴尬了.
然后使用cnpm安装vue
cnpm install --global vue-cli
检查vue版本:
vue -V
2.vue命令:
D:\nodejs>vue help
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]
vue list:
D:\nodejs>vue list
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
.
vue init:
D:\nodejs>vue init --help
Usage: vue-init <template-name> [project-name]
Options:
-c, --clone use git clone
--offline use cached template
-h, --help output usage information
Examples:
# create a new project with an official template
$ vue init webpack my-project
# create a new project straight from a github template
$ vue init username/repo my-project
E:\data\programs\nodejs>vue init webpack myvue
? Project name myvue
? Project description A Vue.js project
? Author 'abc' <'abc@gmail.com'>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
vue-cli · Generated "myvue".
# Installing project dependencies ...
# ========================
added 1319 packages from 677 contributors in 215.597s
# Project initialization finished!
# ========================
To get started:
cd myvue
npm run dev
运行如下:
cd myvue && npm run dev
E:\data\programs\nodejs\myvue>npm run dev
> myvue@1.0.0 dev E:\data\programs\nodejs\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src/main
......
DONE Compiled successfully in 24538ms 1:28:07
I Your application is running here: http://localhost:8080
第一个vue项目就创建完成了，项目创建完了，接下来就需要考虑使用什么UI框架（element-UI， antd等），由于近期项目上使用element，所以接下来咱们一起来安装element-ui框架
安装element-ui框架
说明：如果项目正在运行中，可以直接Ctrl+C，然后输入Y停止运行，然后再安装element
安装element-ui:
npm install -gd element-ui
这样element-ui安装到了global目录下,
然后引入element-ui到myvue/src/main.js中:
/*引入如下组件*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
myvue/src/components/Hello.vue下的代码类似于这个
运行npm run dev时报错了:
ERROR Failed to compile with 2 errors 1:35:06
These dependencies were not found:
* element-ui in ./src/main.js
* element-ui/lib/theme-chalk/index.css in ./src/main.js
To install them, you can run: npm install --save element-ui element-ui/lib/theme
-chalk/index.css
Error from chokidar (E:\): Error: EBUSY: resource busy or locked, lstat 'E:\page
file.sys'
然后试着将element-ui安装到本项目下:
E:\data\programs\nodejs\myvue>npm install --save element-ui
重新执行npm run dev
好吧 一下子通过了,可以访问localhost:8080了,跟这里修改后的效果一样
