搭建vue开发环境

必须要安装node.js

安装淘宝镜像:

cnpm 下载包的速度更快一些。

地址:http://npm.taobao.org/
安装cnpm: sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

1.搭建vue的开发环境 ,安装vue的脚手架工具

sudo npm install --global vue-cli /sudo cnpm install --global vue-cli (全局安装 vue-cli,此命令只需要执行一次)

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

sudo vue init webpack vue-demo01

cd vue-demo01

cnpm install / npm install 如果创建项目的时候没有报错,这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install

npm run dev

 

Vue CLI2升级到Vue CLI3

注意:Vue CLI3是Vue CLI2的升级版本,并不是Vue3.0 。 Vue3.0目前还没有正式发布。Vue CLI3和老版本的Vue ClI创建的项目方式是不一样的,创建项目的用法是一样的。Vue CLI3在项目编译速度上面做了一些优化。无论你用哪个版本的ClI,Vue3.0 发布之前写代码的方式都是一样的。

Vue CLI3的安装以及创建项目:

Vue CL的包名称由vue-cli 改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli (1.x 或 2.x),你需要先通过sudo npm uninstall vue-cli -g或yarn global remove vue-cli 卸载它。

安装vue cli3:sudo cnpm install -g @vue/cli

创建项目:sudo vue create vue-demo02

运行:sudo npm run serve

编译:sudo npm run build

 

另一种创建项目的方式(推荐)

sudo vue init webpack-simple vue-demo03

cd vue-demo03

sudo cnpm install /sudo npm install

sudo npm run dev

 

请求数据的模板: vue-resource,axios,fetch jsonp

1.vue-resource

安装vue-resource(官方提供的vue的一个插件)https://github.com/pagekit/vue-resource

cd vue-demo01

sudo cnpm install vue-resource --save

 

/*使用vue-resource请求数据的步骤

1、需要安装vue-resource模块, 注意加上 --save

npm install vue-resource --save / cnpm install vue-resource --save

2、main.js引入 vue-resource

import VueResource from 'vue-resource';

3、main.js Vue.use(VueResource);

4、在组件里面直接使用

this.$http.get(地址).then(function(){

})
*/

2.axios

 安装sudo cnpm install axios --save

 哪里用哪里引入axios

3.fetch jsonp

 安装sudo cnpm install fetch-jsonp --save

哪里用哪里引入fetch-jsonp

 

vue路由配置:

https://router.vuejs.org/

1.安装

sudo npm install vue-router --save /sudo cnpm install vue-router --save

2、在main.js文件中引入并 Vue.use(VueRouter) (main.js)
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3、配置路由

  (1)、创建组件,引入组件

import Home from './components/Home.vue';
import News from './components/News.vue';

(2)、定义路由 (建议复制),注意名字

const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },

/*默认跳转路由*/
{ path: '*', redirect: '/home' }
]

(3)、实例化VueRouter

const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})

(4)、挂载路由

new Vue({
el: '#app',
router,
render: h => h(App)
})

(5 )、根组件(App.vue)的模板里面添加 

<!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>

(6)、路由跳转

<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>


基于Vue的Ui框架:

  Element Ui 基于vue pc端的UI框架

  MintUi 基于vue 移动端的ui框架

 

mintUI的使用:

   1.找官网http://mint-ui.github.io/docs/#/zh-cn2

  2.安装 sudo cnpm install mint-ui -S -S表示 --save

  3.引入mint Ui的css 和 插件

    import Mint from 'mint-ui';

    Vue.use(Mint);


    import 'mint-ui/lib/style.css'

  4.看文档直接使用。

 

element UI的使用:

  1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart

  2.安装sudo cnpm install element-ui -S -S表示 --save

  3.引入element UI的css 和 插件

    import ElementUI from 'element-ui';
     'element-ui/lib/theme-chalk/index.css';
  Vue.use(ElementUI);

  4.*webpack.config.js 配置file_loader http://element.eleme.io/1.4/#/zh-CN/component/quickstart

    {
      test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
      loader: 'file-loader'
    }

  5.看文档直接使用。

 

element UI组件的按需使用(第一种方法):
  1、sudo cnpm install babel-plugin-component -D

  2、找到.babelrc 配置文件
    把
      {
        "presets": [
        ["env", { "modules": false }],
        "stage-3"
        ]
      }

    改为:
      {
        "presets": [["env", { "modules": false }]],
        "plugins": [
          [
            "component",
            {
              "libraryName": "element-ui",
              "styleLibraryName": "theme-chalk"
            }
          ]
        ]
      }

  3、
    import { Button, Select } from 'element-ui';
    Vue.use(Button)
    Vue.use(Select)


  element UI组件的按需使用(第二种方法):
    import { Button, Select } from 'element-ui';
    Vue.use(Button)
    Vue.use(Select)

    引入对应的css
      import 'element-ui/lib/theme-chalk/index.css';

    如果报错:webpack.config.js 配置file_loader

      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      }

 

posted on 2020-08-04 10:14  lina2014  阅读(99)  评论(0编辑  收藏  举报

导航