您的位置:首页 > 产品设计 > UI/UE

vue项目创建基本使用参考

2017-09-05 13:03 232 查看
//最新稳定版

cnpm install vue

//全局安装 vue-cli

cnpm install --global vue-cli

//创建一个基于 webpack 模板的新项目

vue init webpack my-project

//进入项目目录,运行

cd my-project

cnpm install

cnpm run dev

//路由、XHR请求、数据管理下载
cnpm i vue-resource vue-router vuex bootstrap --save

vue创建单页面应用程序:http://www.cnblogs.com/CinderellaStory/p/6875516.html

vue插件库:https://github.com/vuejs/awesome-vue

vue融合bootstrap:https://bootstrap-vue.js.org/docs

ideal支持vue配置:http://www.cnblogs.com/phpdragon/p/7216994.html

vue使用jquery博客:http://www.cnblogs.com/Yann001/p/6850698.html

1.cnpm install jquery --save

2.build目录下找到webpack.base.conf.js

//开头使用以下代码引入webpack

var webpack = require('webpack')

//module.exports中添加一段代码

// 添加代码

plugins: [

  new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery",

jquery: "jquery",

"window.jQuery": "jquery"

  })

],

3.main.js里导入jQuery

import 'jquery'

4.在需要用到的.vue中

import $ from 'jquery'

vue中使用less

1安装less

npm install less -g

2idea中配置file watch

3Vue项目配置Less

npm install less less-loader --save

4配置webapck解析,"bulid"-->"webpack.base.config.js",添加一下代码

{

   test: /\.less$/,

   loader: 'style-loader!css-loader!less-loader'

 }

5.vue文件中

<style scoped lang="less">

table{

  background: red;

  button{

    background: blue;

    color: #fff;

  }

}

</style>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: