vue直接用vue.js 来创建项目是不是路由 vuex都不能用了

vue不用脚手架搭建项目

发布于
2018-05-31

更新于
2018-05-31

可以的，通过CDN方式，在页面上引入 js 和 css 文件即可开始使用。
案例1：vuex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
</head>
<div id="app"></div>
<body>
    <script type="text/Template" id="tpl">
        <div>
            <tip></tip>
            <input type="button" value="+" @click="jia" />
            <input type="button" value="-" @click="jian" />
        </div>
    </script>
    <script>
        const VuexStore = new Vuex.Store({
            state: {
                count: 0,
                num1: 1,
                num2: 2
            },
            mutations: {
                add(state, arg) {
                    state.count += arg.amount;
                },
                reduce(state) {
                    state.count --;
                }
            },
            getters: {
                he(state,getters) {
                    return state.count + state.num1 + state.num2
                },
                add5(state) {
                    return state.count + 0
                }
            },
            actions: {
                add_act({commit}) {
                    commit({type:'add', amount:5})
                },
                reduce_act({commit}) {
                    commit({type:'reduce'})
                }
            },
            modules: {

            }
        });
        const app = new Vue({
            el: '#app',
            store: VuexStore,
            template: '#tpl',
            components: {
                tip: {
                    computed: {
                        ...Vuex.mapState(['count','num1','num2']),
                        // ...Vuex.mapGetters(['he'])代替了$store.getters.he
                        ...Vuex.mapGetters(['he']),
                    },
                    template: '<div>{{count}}-{{num1}}-{{num2}}={{he}}</div>'
                }
            },
            methods: {
                // ...Vuex.mapMutations(['add'])代替了$store.commit('add')
//                ...Vuex.mapMutations(['add','reduce']),
                ...Vuex.mapActions(['add_act', 'reduce_act']),
                jia() {
//                    this.$store.commit({type:'add',amount:100})
//                    this.$store.dispatch('add_act');
                        this.add_act();
//                    this.add({amount:100});
                },
                jian() {
//                    this.$store.commit('reduce');
//                    this.$store.dispatch('reduce_act');
                        this.reduce_act();
//                    this.reduce();
                }
            }
        })
    </script>
</body>
</html>

至于router案例：https://github.com/vuejs/vue-...

维维

1.1k1420

发布于
2018-05-31

当然可以用啊，你自己引入啊。
脚手架只不过是预先配置好的一个框架，
你要是喜欢，手动搞一个脚手架一模一样的代码结构都行啊。

四月的桜和猫

3.3k53055

发布于
2018-05-31

可以用，vue是一个渐进式的前端框架，渐进式也就意味着你可以在使用过程中，引入自己需要的一系列外部资源。这也就意味着，你可以自己搭建自己的框架，如果不用vue-cli，你可以自己搭建开发框架，需要vuex、需要vue-router的时候，npm安装，在项目中import就可以了。
如果你不想使用框架，直接用vue.js构建项目，你可以看1楼的回复，用CND的方式引入使用。

AKclown

5422040

发布于
2019-08-22

请问有没有，写过不用vue-cli编写的项目，类似JQ一样使用

vue不用脚手架搭建项目

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？