在linux上做网站搭建,网站建设 中企动力南通,QQ群采集到wordpress,优秀品牌设计案例分析Vue CLI
创建Vue CLI项目
【步骤】 命名项目空间#xff1a;在电脑里创建文件夹#xff0c;用于存储所有项目#xff1b;定位项目空间#xff1a;在CMD窗口里定位到工程的项目空间上#xff1b; 方法1#xff1a;(a)用WINR打开运行窗口#x…Vue CLI
创建Vue CLI项目
【步骤】 命名项目空间在电脑里创建文件夹用于存储所有项目定位项目空间在CMD窗口里定位到工程的项目空间上 方法1(a)用WINR打开运行窗口输入CMD进入CMD窗口(b)输入项目空间所在盘符(如f:)后回车©输入cd 根目录路径(可拖拽文件夹到CMD窗口)后按enter键即可方法2(a)打开项目空间所在文件夹(b)ALTD输入CMD后按enter键即可 创建项目第一步在CMD窗口输入vue create 项目名称后按enter键后等待跳转即可(像是卡住了,是在加载,一定不要多次按空格)创建项目第二步用↑键和↓键进行选择选择选项(“Manually select features”)后按enter键进入下一页面创建项目第三步用↑键和↓键选择space键修改选Babel、Router、Vuex后按enter键进入下一页面创建项目第四步选2.x后按下回车出现(Y/n)继续按enter键进入下一页面创建项目第五步出现Where do you prefer placing config for Babel,ESLint,etc.?(Use arrow keys)(翻译你要将文件放到哪里?)选择第二项(In package.json)后按enter键出现(y/N)继续按enter键即可加载相关的文件此时会自动加载相关文件加载完毕后出现Successfully created project 项目名称.则表示项目创建成功 【注意】 相关的文件最好不要有中文和空格出现error相关关掉重来试试 启动Vue CLI项目
【步骤】 用软件IDEA打开 node.js创建好的项目在软件左下角找到Terminal选项卡并打开 若定位是在项目的根目录上则进行下一步若没定位在项目的根目录上定位后下一步 输入npm run serve后回车等待加载即可Compiled successfully in XXXms代表成功 【说明】 启动Vue ClI项目也可通过CMD窗口这样的方式来完成启动成功的提示还包括http://localhost:8080这样的网址在CMD 窗口中按下Ctrl C 即可停止已启动的项目 解析Vue CLI项目
文件夹.idea 【说明】软件IDEA管理项目时自动生成的可以无视 文件夹node_modules 【说明】当前项目所需的依赖项(自己不要操作) 【注意】 此文件夹不会提交到git若需要的话用以下方式下载若没有\缺失可以在Terminal输入npm install来下载 文件夹public 【说明】 是当前项目启动后的根路径可存放各种资源如.css、.js、.jpeg若此文件夹下有1.jpg则可通过http://loaclhost:8080/1.jpg查看 文件favicon.ico 【说明】项目的图标每个项目在(编译后的)根目录下有此文件会在浏览器中显示 文件index.html 【说明】当前项目的页面在Vue CLI项目中有且仅有一个HTML页面 文件夹src
文件夹assets 【说明】资源文件夹用于存放静态资源(如 .css、.js、jpeg) 【注释】反正就是存放不随程序运行而变化的文件(如logo.png) 文件夹components 【说明】存放视图组件(被其他视图组件调用的)是可能被复用的组件并且在不同的调用中传入的参数可以不同 文件夹router
文件index.js 【说明】路由配置文件主要配置访问路径与视图组件的对应关系 文件夹store
文件index.js 【说明】存储共享的量的文件 文件夹views 【说明】用于存放视图组件 文件APP.vue 【说明】是index.html默认加载的视图文件 文件main.js 【说明】当前项目的主.js文件通常用于管理一些配置 【注释】如添加了某些依赖项(如:Element UI)后可能需要在此处导入才可以使得各.vue文件可以使用这些依赖项 文件.gitignore 【说明】用于配置哪些文件和文件夹不会提交到git如果此项目不提交到git则此文件没用 文件babel.config.js 【说明】Babel的配置文件通常不用关心(不需要操作) 文件jsconfig.json 【说明】.js文件的配置文件通常不用关心(不需要操作) 文件LICENSE 【说明】许可证协议文件默认的项目中通常没有此文件在git上公开的项目通常都包含此文件 文件pakcage.json 【说明】主要配置当前项目的依赖项和项目的编译打包等配置通常不建议手动修改 文件package-lock.json 【说明】自动管理的配置文件通常不建议手动修改 文件README.md 【说明】此项目的说明文件如果此项目提交到git通常会显示在git的此项目的主页 【注释】通常应该在此文件中对项目进行必要的描述(如何配置此项目、如何启动此项目、相关的注意事项等) 文件vue.config.js 【说明】.vue文件的配置文件通常不用关心(不要操作) 使用Vue CLI项目
.vue文件相关 【说明】 .vue文件的源代码可以由3大部分组成(a).页面设计template(b).样式style©.脚本script这3大部分并不都是必须的例如某个.vue没有script也是完全正常的 【template】 其直接子标签必须有且仅有一个在其子级里如果出现了router-view/表示此区域将由另一个视图文件来负责设计至于是哪个视图取决于router/index.js中的路由配置 关于路由的简单配置 【说明】 router下的index.js文件是用于配置路由的在此文件中有一个routes常量其属性值是一个对象的数组数组元素中可以有三个属性 path路径不可重复name自定义名称此属性可不配置component路径对应的视图组件(某个.vue文件加载得到的对象)有两种加载方式1.在当前文件的起始位置通过import语法静态导入(默认导入)2.在此component属性值位置使用箭头函数结合import函数进行导入 当显示的视图组件中使用到了router-view /时将根据当前访问的URL浏览器中的路径来决定显示哪个视图 【例子】 import HomeView from ../views/HomeView.vueconst routes [{path: /,name: home,component: HomeView},{path: /about,name: about,component: () import(../views/AboutView.vue)}]Vue CLI的嵌套路由 【场景】在开发实践中一个项目中可能存在这样的情况 部分页面完全没有共用的部分所以在App.vue中要仅保留一个router-view/标签但仍有部分页面存在共用的部分所以在其它.vue文件中也可能需要再次使用到router-view /具体表现为在App.vue中只有router-view/则此处实际显示的就是另外某个.vue了但是在这些其他的.vue中也会用到router-view/即出现了“嵌套” 配置相关文件 【步骤】 打开CMD/终端窗口并且定位到当前项目的文件夹输入npm i 需要的配置 -S按下回车 , 静待即可出现added ‘数字’ packages in 数字’s表示成功 Element UI 【1】安装Element UI npm i element-ui -S【2】配置Element UI 位置src/main.js 内容 import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
Vue.use(ElementUI);【3】检查Element UI 说明 在package.json文件中查看是否有相关依赖(element-ui:^2.15.9)若有但不能用则删掉node_modules重新下载即可 Axios 【1】安装Axios npm i axios -S【2】配置Axios 位置src/main.js 内容 import axios from axios
Vue.prototype.axios axios说明 需要注意目标服务器可能是禁止跨域访问的错误提示中有CORS字样在Spring Boot工程中可以使得启动项目的类实现WebMvcConfigurer接口
