vue新建项目

一、前提：

安装node（使用它的包管理工具npm）；

全局安装cnpm（npm比较慢，但也可以省略该步骤）；

全局安装vue脚手架工具vue-cli（命令：npm install -g vue-cli ）

二、新建项目：

1. 在指点目录下使用命令：vue init  webpack 项目名称

2. cd 进入项目文件夹，使用命令：cnpm install 安装依赖文件

3. 运行命令：cnpm run dev 即可运行项目（默认端口为8080）

三、集成常用库

1. vue中集成element-ui

• 安装：cnpm install element-ui -S
• 整体环境：在项目的main.js中加入以下内容                

  • import ElementUI from 'element-ui'

    import 'element-ui/lib/theme-chalk/index.css'

    Vue.use(ElementUI)

  • 注意：如果需要重置ElementUI或者html的默认css，可以在Vue.use(ElementUI)之前引入，一边全局使用

  • 如：

                    import ElementUI from 'element-ui'

                    import 'element-ui/lib/theme-chalk/index.css'

                    import '@/styles/reset.css' //重置样式

                    import '@/styles/reElement.css' //重置element样式

                    import '@/styles/common.css' //共用样式

                    Vue.use(ElementUI)

2. vue 中集成sass

• 项目开发依赖安装：cnpm install node-sass --save-dev； cnpm install sass-loader --save-dev
• 打开webpack.base.config.js 在loaders里面加上  module -- rules（这里没加我也能用，知道原因的告诉我以下，谢谢！）

• {

      test: /\.scss$/,

      loaders: ["style", "css", "sass"]

   },

• 页面中使用：<style lang="scss" scoped="" type="text/css"></style>

3. vue中集成jquery

• 安装：cnpm install jquery --save
• webpack配置：build目录下找到webpack.base.conf.js文件，在开头使用以下代码引入webpack，因为该文件默认没有引用并在module.exports中添加一段代码

• 引入webpack：const webpack = require('webpack') 

  • plugins: [ 

    new webpack.ProvidePlugin({

    $: "jquery",

    jQuery: "jquery",

    jquery: "jquery",

    "window.jQuery": "jquery"

    })

    ],

• 添加代码：

• 全局引入：在main.js里引入：import 'jquery'      ===>>> 这样可以全局使用，也可以在要使用的页面中单独引入

• 引入之后便可使用$；组件中测试可使用：console.log($('选择器'))

以上是我在配置环境时集成第三方库的过程。

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！