vue的使用(一)之vue脚手架的安装和使用
要想用vue模块化开发
1.首先全局安装webpack
npm install webpack -g
2.全局安装vue脚手架
npm install -g @vue/cli-init
3.npm 更改为淘宝镜像的方法
1、命令行临时使用指定镜像(淘宝)
npm --registry https://registry.npm.taobao.org install express
2、命令行永久更改使用指定镜像(淘宝)
npm config set registry https://registry.npm.taobao.org
以后 npm install express 默认使用指定(淘宝)镜像
3、使用淘宝 NPM 镜像(参考 http://www.runoob.com/nodejs/nodejs-npm.html)
命令行输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了
4.安装Yarn
yarn比npm更快更高效是Facebook发布的node.js包管理器
安装命令:
npm i yarn -g -verbose
yarn安装之后把淘宝镜像给安装下
yarn config set registry https://registry.npm.taobao.org
5.创建空文件夹cmd进入黑窗口初始化vue项目
这里直接用npm来创建第三种方式的镜像
vue init webpack vue-name #vue脚手架使用webpack模块化一个appnae项目
vue init webpack vue-name --offline #vue脚手架使用webpack模块化离线生成一个appnae项目
#离线生产的前提步骤
按照网络上的提示,解决办法是改为离线创建,我们需要下载github仓库中的vue-templates/webpack,然后解压到本地。下载地址为:https://github.com/vuejs-templates/webpack,下载之后,解压到本地用户目录下的.vue-templates目录下。
下载之后的压缩包为webpack-develop.zip,我们解压之后,需要更改目录名为webpack。用户目录下的目录为.vue-templates,注意文件夹名称前面的点(.)。
这样,我们再进行vue init webpack vuedemo命令的时候,需要带上参数--offline表示离线初始化。
创建成功之后的提示:
根据提示,我们进入项目目录,然后运行npm run dev,启动服务。
在浏览器中打开http://localhost:8080,得到结果:
6.Yarn创建项目的教程
1.生成项目
vue init webpack mango-ui