Vue2.0搭建脚手架

Vue-cli脚手架的搭建

1.随着vue.js越来越火爆,更多的项目都用到vue进行开发,在实际的开发项目中如何搭建开发脚手架呢,今天跟大家分享一下:
首先需要了解的知识
Html
Css
Javascript
Node.js 环境(npm包管理工具)
Webpack 自动化构建工具

首先需要安装node.js环境:直接在官网下载即可
安装完node.js环境之后就可以,使用npm 命令进行插件的安装了。
1、说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);
2、使用npm安装插件:命令提示符执行: npm install 插件名称
3、选装 cnpm 因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事!来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”;

安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
输入cnpm -v,可以查看当前cnpm版本

Vue-cli的安装:
直接在命令行输入:

npm   install    vue-cli  -g     //全局安装vue-cli

安装之后可以在命令行输入:

vue  -V    //查看当前版本

可以看到版本号,若报错则安装失败

项目的安装
首先需要安装一个基于webpack的模板,输入

vue  init  webpack   <项目目录名称>   //  

安装完成之后就会,出现各种配置,按自己需求选择性安装。

安装完成之后直接在命令行输入:

npm  cd  <项目名称>   //进入到项目目录
npm  run  dev      //运行启动项目     dev不是固定的(可以自定义);

刚初始化的项目是没有依赖的,如果运行会报类似这样的错误,输入命令
cnpm install

在这里插入图片描述
安装完成之后出现上面的情况,输入 相应的端口进行访问即可。

出现这个页面就是,搭建完成!

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_41709082/article/details/84563536