Vue安装 + Hello world

介绍 | Vue.jshttps://v3.cn.vuejs.org/guide/introduction.html 

npm 安装

安装 nodejs 自带 npm
https://nodejs.org/en/
下载 node-v16.14.0-x64.msi
注win7 只支持到最大版本 node-v12.22.10-x86.msi 
检测
$ node -v

【npm uninstall xxx】删除xxx模块； 
【npm uninstall -g xxx】删除全局模块xxx；

vue 安装

如果访问国外慢 可以用不用  cnpm, $ npm install -g cnpm --registry=https://registry.npmmirror.com
创建一个 npm 目录，例 x:\npm
# 最新稳定版
$ npm install vue@next

Vue 还提供了编写单文件组件的配套工具。如果你想使用单文件组件，那么你还需要安装
$ npm install -D @vue/compiler-sfc
$ npm install --save-dev style-loader

命令行工具 (CLI)

$ npm install -g @vue/cli
$ npm install -g @vue/cli-init

创建一个 xxx\project\demo\site\admin 目录
然后在 Vue 项目中运行：
初始化一个项目，webpack是构建工具 html前端项目文件夹的名称

$ vue init webpack html

安装项目所需要的依赖：

$ cd html
$ npm install

运行项目

$ npm run dev

浏览器打开
http://localhost:8080

安装 Vue Devtools

https://devtools.vuejs.org/guide/installation.html

$ cd html
$ cnpm install --save-dev @vue/devtools
运行

$ cd node_modules/.bin

$ vue-devtools

import Devtools from '@vue/devtools'
//import Vue from 'vue' 在vue之前

安装 axios
html目录

$ npm install axios
//$ npm install --save axios vue-axios

src/main.js 引入

import Axios from 'axios'
//import VueAxios from 'vue-axios'
Vue.prototype.$ajax = Axios

安装 vuex

npm install vuex@next --save

src/main.js 引入

import Store from 'vuex'

发布

打包之前修改config下的index.js文件中build，assetsPublicPath:'./'

$ npm run build

样例 

src/main.js

import Devtools from '@vue/devtools'
import Vue from 'vue'
import App from './App'
import router from './router'
import Axios from 'axios'
//import VueAxios from 'vue-axios'
import Store from 'vuex'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.prototype.$ajax = Axios

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

HelloWorld.vue

<template>
    <div id="example1" class="demo" :id="'abc-'+dynamicId">
        <p>渲染html: <span v-html="rawHtml"></span></p>
        <p>不渲染html: {{ rawHtml }}</p>
        <p v-if="seen">条件判断 现在你看到我了</p>
        <button @click="show">点击事件</button>
        <p><a :[attributeName]="url">动态参数</a></p>
        <p>计算属性 {{ cacle1 }}</p>
        <p>get 和 set {{ fullName }}</p>
        <p>侦听器 <input v-model="question" /><span>{{ answer }}</span></p>
        <div class="static" :class="{ active: isActive, 'text-danger': hasError }">CSS</div>
        <div :class="[activeClass, errorClass]">CSS数组</div>
        <div style="clear:both" :style="styleObject">CSS内联样式</div>
        <h1 v-if="type=='A'">IF A</h1>
        <h1 v-else-if="type=='B'">ELSE IF B</h1>
        <h1 v-else>ELSE C</h1>
        <h1 v-show="ok">Hello!</h1>
        <ul>
            <li v-for="item in items" :key="item.message">
                {{ item.message }}
            </li>
        </ul>       
        <ul>
            <li v-for="(item, index) in items" :key="item.message">
                 {{ parentMessage }} - {{ index }} - {{ item.message }}
            </li>
        </ul>        
        <ul><li v-for="n in evenNumbers">{{ n }}</li></ul> 
        <ul><li v-for="n in 10">{{ n }} </li></ul> 
        <ul><li v-for="n in numbers" v-if="n>2">{{ n }}</li></ul> 
        <div>
          <button v-on:click="counter += 1">Add 1</button>
          <p>The button above has been clicked {{ counter }} times.</p>
        </div> 
        <div>
            <!-- 阻止单击事件继续传播 -->
            <a v-on:click.stop="doThis"></a>
            <!-- 提交事件不再重载页面 -->
            <form v-on:submit.prevent="onSubmit"></form>
            <!-- 修饰符可以串联 -->
            <a v-on:click.stop.prevent="doThat"></a>
            <!-- 只有修饰符 -->
            <form v-on:submit.prevent></form>
            <!-- 添加事件监听器时使用事件捕获模式 -->
            <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
            <div v-on:click.capture="doThis">...</div>
            <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
            <!-- 即事件不是从内部元素触发的 -->
            <div v-on:click.self="doThat">...</div>
            <!-- 点击事件将只会触发一次 -->
            <a v-on:click.once="doThis"></a> 
            <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
            <!-- 而不会等待 `onScroll` 完成  -->
            <!-- 这其中包含 `event.preventDefault()` 的情况 -->
            <div v-on:scroll.passive="onScroll">...</div>
            <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
            <input v-on:keyup.enter="submit">
            <!-- 处理函数只会在 $event.key 等于 PageDown 时被调用 -->           
            <input v-on:keyup.page-down="onPageDown"> 
            <!-- Alt + C -->
            <input v-on:keyup.alt.67="clear">
            <!-- Ctrl + Click -->
            <div v-on:click.ctrl="doSomething">Do something</div>  
            <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
            <button v-on:click.ctrl="onClick">A</button>
            <!-- 有且只有 Ctrl 被按下的时候才触发 -->
            <button v-on:click.ctrl.exact="onCtrlClick">A</button>
            <!-- 没有任何系统修饰符被按下的时候才触发 -->
            <button v-on:click.exact="onClick">A</button> 
            <!-- 鼠标按钮修饰符 .left  .right .middle -->
        </div> 
  </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data () {
        return {
            name:'name1',
            rawHtml: '<span style="color: red">Hello World2.</span>',
            dynamicId:123,
            attributeName:'myhref',
            url:'http://a.b.c',
            seen:true,
            firstName:'q',
            lastName:'g',
            question: '',
            answer: '请输入?号+任意字符',
            isActive: true,
            hasError: false,
            activeClass: 'active',
            errorClass: 'text-danger',
            styleObject: {
                color: 'red',
                fontSize: '13px'
            },
            type:'B',
            ok:false,
            parentMessage: 'Parent',
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ],
            numbers: [ 1, 2, 3, 4, 5 ],
            counter:0,
        }
    },
    watch: {
        question(newQuestion, oldQuestion) {
        if (newQuestion.indexOf('?') > -1) {
                this.getAnswer()
            }
        }
    },
    computed:{
        cacle1(){ //默认get
            return 2 * 3;
        },
        fullName: {
            get() {
                return this.firstName + ' ' + this.lastName
            },
            set(newValue) {
                const names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        },
        evenNumbers: function () {
            // filter()、concat() 和 slice()
            return this.numbers.filter(function (number) {
                return number % 2 === 0
            })
        },
    },
    methods: {
        show(event){
            // `this` 在方法里指向当前 Vue 实例
            alert('Hello ' + this.name + '!')
            // `event` 是原生 DOM 事件
            alert(event.target.tagName)
        },
        getAnswer(){
            this.answer = 'Thinking...'
            this.$ajax
                .get('https://yesno.wtf/api')
                .then(response => {
                    this.answer = response.data.answer
                })
                .catch(error => {
                    this.answer = '调用 API 错误 ' + error
                })
        }
    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
  text-align: left;
}
</style>