首页天道酬勤vue最新项目,如何架构一个vue项目

vue最新项目,如何架构一个vue项目

张世龙 05-05 18:53 14次浏览

1 .公共文件夹favicon.ico //系统图标index.html //页面条目模板页面。 2. src文件夹(项目源目录) 2.1 assets文件夹(资源目录) (logo.png ) log图像)在实际开发中不可用

2.2组件文件夹(组件目录) HelloWorld.vue文件

template//内容//.省略./templatescriptexportdefault {//导出组件name: 'HelloWorld ', props: {//参数属性msg : string }//scriptstylescoped//本组件样式在没有scoped的情况下全局有效//.省略./style 2.3 rrescoped

导入vue from ' vue '//跳转的主键importvuerouterfrom ' vue-router ' importhomefrom ' ./views/home.vue ' vue.use () home.vue ) ) vur根const routes=[ { path: '/',/跳转路径name: 'Home ',/根名称component: Home//跳转组件安装组件使用component 3360 (=import (/* webpackchunkname : ' about ' */' ./views/about.vue ' ) /动态导入)时组件const router=newvue router ({/vue router示例routes} )导出默认路由器//导出(允许在其他位置导入路由) 2.4 views文件夹

templatedivclass=' home ' img alt=' vuelogo ' src=' ./assets/logo.png ' hello world msg=' welcometoyourvue.js app hello world.vue ' export default {//导出组件(可导入到其他位置) name: 'Home' //组包含组件: {//子组件脚本2.5 (app.vue )文件template//模板(组件内容) divid='app'divid='nav '对应于a标记,o指定的根路由divrouter-view//渲染根匹配的组件/div/templatestyle//全局样式//.省略importvuefrom ' vue '//importappfrom router ' vue.config.production tip=fals sion vue实例化router,//routerrender3360h=h(app )/renderapp组件()

. ds _ store node _ modules/dist # localenvfiles.env.local.env.*.local # log files NPM-debug.log * yarn-debug 4.(babel.config.js )文件)将ES6语法转换为ES5 )5. ) package.JSON文件(项目配置文件({ 'name': 'vue01jws ', /项目名称' version} //专用' scripts': {//项目包常规命令' serve ' : ' vue-CLI-service serve ',//build'3360'vue-CLI-serve (是否'从属' : {//与正式环境相对应的依赖关系' core-js': '^3.6.5',' vue ' vue-router ' 3330 ' ' dev dependencies ' : {//开发环境对应的依赖关系' @ vue/CLI-plugin-babel ' : '~4.5.0 ', ' @ vue/CLI-plugin-router ' vue-template-compiler ' : ' ^2.6. 11 ' },' browserslist': [ ' 1% ',]

idea启动vue项目,idea打包vue项目