使用vue-cli脚手架搭建项目
2017-11-26 23:35
1066 查看
目前很多网站都在使用vue技术来开发,那么问题就来了,怎么用vue搭建项目呢?
这里我向大家介绍怎么使用脚手架搭建项目。
-v查看安装node版本,有版本号证明安装成功,输入命令where node ,查看node安装的路径,输入npm -v ,同样出现版本号,证明node.js自带的npm存在。
webpack 1.0版本官网:https://webpack.github.io/docs/usage.html
webpack 2.0版本官网:https://webpack.js.org/
在这里我们使用webpack 1.14.0
3、新建一个文件夹,用来存放你的项目,然后打开这个文件夹,按住“shift”键,然后鼠标右键,点击”在此处打开命令窗口” 1、在cmd命令面板输入npm install vue-cli -g
注:-g表示全局安装,然后同样检查是否安装成功,输入命令 : vue -V ,注意这里的V是大写的。
4、新建一个文件夹,用来存放你的项目,然后打开这个文件夹,按住“shift”键,然后鼠标右键,点击”在此处打开命令窗口”,输入命令
5、输入命令 npm install
希望本文对您有所帮助,有好的意见欢迎探讨!
这里我向大家介绍怎么使用脚手架搭建项目。
1、首先做好预备工作。
1>安装node.js 。
因为我们这边会用到一个命令npm ,它是node自带的包管理工具,所以需要先安装node.js.下载网址:https://nodejs.org/en/,大家也可以自己百度搜索,建议安装LTS稳定版的,current是最新版,可能不太稳定。安装完成后在“开始”输入栏输入cmd或win+R,打开cmd命令面板,输入node-v查看安装node版本,有版本号证明安装成功,输入命令where node ,查看node安装的路径,输入npm -v ,同样出现版本号,证明node.js自带的npm存在。
2>安装cnpm(可选择性安装)。
1、由于直接使用npm install 安装第三方包是去国外网站上下载,有可能会被墙而安装失败,所以我们要将下载源切换到国内淘宝上因此需要利用 npm install nrm -g安装一个全局的nrm 2、安装好nrm以后,在cmd命令面板中输入: nrm use taobao 将下载源切换到淘宝,可以使用 nrm ls 查看当前使用的下载源 3、也可安装淘宝提供的类似于npm的工具 cnpm来替代npm安装node包,安装包命令和npm一样,安装cnpm命令: npm install cnpm -g
3>安装webpack资源打包工具。
webpack是一个资源的打包工具,分为1.0和2.0版本,可以将 .js, .css , image等静态资源当做一个模块来进行打包,那么每一种模块都是有一个对应的 loader来实现webpack 1.0版本官网:https://webpack.github.io/docs/usage.html
webpack 2.0版本官网:https://webpack.js.org/
在这里我们使用webpack 1.14.0
安装webpack步骤: 第一种安装方式: 在cmd命令行面板中 执行: npm install webpack@1.14.0 -g 将webpack1.14.0版本安装为全局就能够在cmd命令行面板中使用webpack指令了 第二种安装方式: 在cmd命令行面板中 执行: cnpm install webpack@1.14.0 -g 将webpack1.14.0版本安装为全局就能够在cmd命令行面板中使用webpack指令了
2、安装vue-cli
3、新建一个文件夹,用来存放你的项目,然后打开这个文件夹,按住“shift”键,然后鼠标右键,点击”在此处打开命令窗口” 1、在cmd命令面板输入npm install vue-cli -g
注:-g表示全局安装,然后同样检查是否安装成功,输入命令 : vue -V ,注意这里的V是大写的。
4、新建一个文件夹,用来存放你的项目,然后打开这个文件夹,按住“shift”键,然后鼠标右键,点击”在此处打开命令窗口”,输入命令
vue init webpack myproject
5、输入命令 npm install
6、编译。输入命令 npm start 或者命令 npm run dev
相关文章推荐
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
- 【23】使用vue-cli脚手架搭建webpack项目基本结构
- 使用vue-cli(vue脚手架)快速搭建项目的方法
- 使用 vue-cli 搭建项目
- vue.js学习02之vue-cli脚手架创建项目环境搭建
- webpack搭建的vue-cli项目如何使用sass?
- vue学习笔记(一)使用npm,webpack,vue-cli搭建vue项目
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
- 使用vue-cli搭建vue项目完整版
- vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布
- 使用vue脚手架工具搭建vue-webpack项目
- 使用 vue-cli 搭建项目
- Vue新手之路(一)——使用vue-cli搭建项目
- 使用 vue-cli 搭建项目
- vue2.0项目笔记系列(1)——搭建Vue脚手架(vue-cli)
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
- vue-cli的使用,创建项目,教程,上手,vue脚手架的使用
- 使用vue-cli脚手架搭建vue项目
- vue2.0项目实战(2)使用 vue-cli 搭建项目
- 详解使用vue脚手架工具搭建vue-webpack项目