vue项目创建基本使用参考

来源:互联网 发布:王尼玛 知乎 五五开 编辑:程序博客网 时间:2024/05/22 14:41
//最新稳定版
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>