新项目可视化打开可视化面板vueui创建的项目可以保存为预设，下次使用该预设时无需重新配置。创建完成后，我们可以看到它的文件结构vue3第一次体验入口文件在public，不要在根目录下配置全局变量新建一个vue.config.js//vue.config.js配置选项模块.exports={//options//基本路径请在vue.cli之前使用3.3baseUrlpublicPath:"/",//构建时输出目录outputDir:"dist",//放置静态资源的目录assetsDir:"",//是否要为生产环境构建生成源映射？productionSourceMap:true,//调整webpack内部配置configureWebpack:()=>{},//(Object|Function)chainWebpack:()=>{},//CSS相关选项css:{//改变里面的组件CSS提取到单个CSS文件（仅在生产中使用）//也可以是传递给`extract-text-webpack-plugin`的选项对象extract:true,//是否启用CSSsourcemap？sourceMap:false,//为预处理器的加载器传递自定义选项。例如，当传递给//Css-loader时，使用`{Css:{...}}`。loaderOptions:{},//为所有CSS和预处理文件启用CSS模块。//此选项不影响`*.vue`文件。modules:false},//配置webpack-dev-server行为。devServer:{//true自动开启浏览器open:true,port:8088,},//三方插件选项pluginOptions:{//...}}启动命令：定位到根目录，执行命令npmrunserveautomatically打开项目网页组件之间的传值新建两个文件child.vueparent.vue父子组件传值props/$emit$parent/children(获取组件信息)$ref(获取组件信息)并给出一个名字)app.vuestyle>parent.vueParent
子组件传递给父组件的值:{{msg}}
{{childMsg}}
$attrs/$listeners解决多级组件传值路由vue-router跳转点击跳转按事件跳转methods:{toPage(){this.$router.push({path:'/page'})}}动态路由{path:'/list/:id',name:'List',component:()=>import('../views/List.vue')},{{$route.params.id}}inVuex/store从'vue'导入Vue从'vuex'导入Vuex.use(Vuex)exportdefaultnewVuex.Store({state:{count:9},mutations:{add(state){state.count++},decreate(state){state.count--}},//异步操作actions:{delayAdd(context){setTimeout(()=>{context.commit('add')},1000)}},modules:{}})获取store中的值{{vuex_count}}
computed:{vuex_count(){returnthis.$store.state.count}}插件推荐本文由博客发布平台OpenWrite发布！
