安装vue
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文件