• vue cli 框架搭建


    =============== 通知:

    博主已迁至《掘金》码字,博客园可能以后不再更新,掘金地址:https://juejin.im/post/5a1a6a6551882534af25a86b  请多多关照!!

    -------------------在此谢过!-----------

    在命令行安装,需要先安装node环境 ,npm 环境, webpack环境

        在下载vue的时候需要先确认以下几点是否存在:

            验证node是否安装:

                node -v

            验证npm是否安装:

                npm -v

    安装node:

      Windows 安装包(.msi)

      32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

      64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

    安装webpack:

          $ npm install webpack -g

    安装npm:

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

      git下载地址:

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

         

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

      淘宝镜像: http://npm.taobao.org/

         命令:

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

      安装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:

                  $ npm install vue-router --save

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

                $ npm install node-sass --save  

               

          下载安装axios:

                 $ npm install axios --save

            下载vue ui框架iview:

               $ npm install iview --save

       项目打包:

           $ npm run build

                     完

  • 相关阅读:
    c# 基础
    摹客插件,自动识别画板大小!
    知道这10点,你才是真正会画线框图
    在线原型实例(可编辑):图片社交-InstagraAPP
    16 种原型设计工具及其使用场景
    微博APP在线原型实例(可编辑)
    5款前端切图工具大比拼:谁是最强切图神器
    你真的了解这4款协作设计吗
    nvm 安装及使用(npm版本管理工具)
    webpack入门四 安装vue,并打包
  • 原文地址:https://www.cnblogs.com/christineqing/p/7481310.html
Copyright © 2020-2023  润新知