vue cli 框架搭建

1,669 阅读1分钟

在创建项目前,我们需要先确认node ,npm , webpack等环境是否存在,如果没有的话,我们需要先将环境配置完整后再进行项目的创建!


验证node是否安装:          

node -v

验证npm是否安装:

npm -v

安装node:

windows 安装包(.msi)

32 位安装包下载地址 : nodejs.org/dist/v4.4.3…

64 位安装包下载地址 : nodejs.org/dist/v4.4.3…

安装webpack:

 $ npm install webpack -g

安装npm:

现在安装node就会自带npm的安装,并不需要另外安装

git下载地址:

$ git clone --recursive git://github.com/isaacs/npm.git  

(一般npm环境下载速度较慢。可以下载淘宝镜像cnpm来提高速度,但有时两者下载的文件版本会有细微差别)

淘宝镜像: npm.taobao.org/

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue框架

$ npm install vue

安装vue脚手架: vue-cli

$ cnpm install vue-cli -g

检测vue版本:

$  vue --version

下面就可以开开心心的使用webpack 搭建项目实例喽!!!

webpack完整版:

$ vue init webpack demo

webpack 简约版:

$ vue init webpack-simple demo

进入项目目录:

$ cd demo

下载安装依赖:

$ cnpm install 

下载完成后启动vue项目:

$ npm run dev

下载安装vue router:(现在创建项目时会提示是否安装router,回复y即可)

$ npm install vue-router --save

下载安装Sass (关于sass/less在vue中的配置和使用会在接下来的文章详细说明)

$ npm install node-sass --save-dev  
$ npm install sass-loader --save-dev

下载安装Less

$ npm install less --save-dev  
$ npm install less-loader --save-dev 

下载安装axios:

$ npm install axios --save

下载vue ui框架iview:

$ npm install iview --save

项目打包:

 $ npm run build

** 完 **


    作者:晴天de雨滴    
    出处:https://juejin.cn/post/6844903512493539341
    版权所有,欢迎保留原文链接进行转载:) 

如果你对我对文章感兴趣或者有些建议想说给我听👂,也可以添加一下微信哦!

最后:
        祝各位工作顺利!
                        -小菜鸟Christine