安装vue

2018-03-13  本文已影响0人  1米8女生ye

vue作为目前主流前端框架之一,很多各种安装依赖。为了提高效率,所以今天有时间就将一般会用到关于vue的安装依赖总结一下,以下安装的环境为:windows 64位。

一:安装vue  ( 30分钟)

1:安装node.js   node -v  ( 淘宝脚手架:npm install -g cnpm --registry=https://registry.npm.taobao.org)

2:装vue(官网) npm install vue

3:装vue-cli脚手架 (官网) npminstall-g @vue/cli(如果要改盘的话,直接输入D:回车)

4:装webpack: vue init webpack my-project  

5:cd my-project  npm run dev

二:安装sass(scss,css预处理器)

1: 基于vue安装sass(需要下载node,打开npm端输入命令)

Step1:cd 进入该项目目录

npm install node-sass --save-dev  //安装node-sass

npm install sass-loader --save-dev   //安装sass-loader

Step2:配置Sass解析器:

 在webpack.base.conf.js中,modules结节下的rules节点中添加sass的解析器:

module: {

    rules: [

        { test: /\.sass$/,  loaders: ['style','css','sass'] }

     ]

}

<style lang="scss">

npm run dev 

2:单独使用sass:

0:必须先安装Ruby,然后再安装Sass。

http://rubyinstaller.org/downloads( 2.3.3) 傻瓜式操作安装;

(通过ruby的包管理工具gem安装saa,类似node的npm)

安装完毕-开始-找到点击ruby Start启动ruby.

打开ruby的窗口输入 gem install sass

输入命令“sass -v”则可以显示安装的版本。

时间久了,我们的sass可能需要更新,还是上面的方法进入ruby的Command的命令环境,输入“gem update sass”即可更新最新的版本。

删除:gem uninstall sass

SASS编译:watch只要项目中有任何的修改,都会自动变化。

sass --watch (要编译的sass文件路径) / .scss: (要输出css文件路径)/ .css

编译压缩输出方式:在编译最后加上  --style compressed

三:安装微信JS-SDK http://203.195.235.76/jssdk/#menu-pay

npm i -S weixin-js-sdk

import wx from 'weixin-js-sdk'

四:安装vuex

cnpm install vuex --save-dev

import Vuex from 'vuex'

五:打包上线:

 npm run  bulid

产生disk文件


上一篇下一篇

猜你喜欢

热点阅读