当前位置： 首页 > news >正文

智慧城市建设评价网站,深圳最火的网站,医院网站建设山东,网站营销如何做1.安装环境 构建vue项目#xff0c;需要提前安装相应的环境#xff0c;这里主要就是node#xff0c;npm和Vue CLl。 #1、安装nodejs brew install nodejs #2、再执行下面命令来安装npm(npm是开发nodejs时所用的依赖库) brew install npm #3、安装vue cli npm install -g v…1.安装环境 构建vue项目需要提前安装相应的环境这里主要就是nodenpm和Vue CLl。 #1、安装nodejs brew install nodejs #2、再执行下面命令来安装npm(npm是开发nodejs时所用的依赖库) brew install npm #3、安装vue cli npm install -g vue/cli

OR

yarn global add vue/cli这些环境的安装还会比较简单的其他平台的安装也是基本一致的接着查看环境的安装情况。 node –version vue –version2.创建vue项目 切换到具体的目录下使用以下指令就可以完成vue项目。 vue create file-web?Please pick a pressetUse arrow keys这一行是提示行后面的每一个依赖安装都会以这样的提示开头紧接着的是选项列表。用键盘上下键可切换选中项高亮蓝色回车键确定选中。 这里我们采用Manually select features来手动安装一些依赖。 接着选择你需要的功能。仍然是键盘上下键控制选中项这里采用空格键选中或取消选中当前项。这里我们选中下图中的几个功能选择Vue版本安装Babel、Router、Vuex、CSS预编译器和格式化检查回车键确定。 接着选择Vue.js版本此实验采用2.x。 接着都是同样的流程选择自己需要的选项确定即可。 路由是否采用history模式HTML5 History 模式 | Vue Router选择是。输入Y回车键确定。 选择一个CSS预编译器可以选择任意一个这里选用Stylus。 选择一个插件化的JavaScript代码检测和格式化工具 此处采用ESLint width error prevention only。 何时检测代码此处采用Lint on save保存文件时测试。 如何存放配置选择保存到专用的配置文件中。 是否保存本次配置y记录本次配置然后需要给配置命名N不记录本次配置这里选择 N。 接着会自动开始安装各种依赖。 进度100%后项目就创建成功了同时也会给出提示。 使用以下指令启动项目。 cd file-web npm run serve接着使用上面的地址即可访问项目了出现以下画面就说明项目成功创建并启动了。 同时还可以使用图形化的方式创建项目这里就不具体演示了使用以下指令就可以在浏览器开启图形化创建项目的界面。 vue ui 3.项目结构 这里使用webstorm打开项目稍微看一下项目的具体结构。 node_modules存放项目的各种依赖。 public存放静态资源其中的index.html是项目的入口文件浏览器访问项目的时候默认打开的是生成后的index.html。 src存放项目主体文件 assets存放各种静态文件包括图片、CSS文件、JavaScript文件、各类数据文件等。components存放公共组件例如顶部导航栏Header.vue。router/index.jsvue-router安装时自动生成的路由相关文件主要用来为每个路由设置路径、名称和对应页面的 .vue 文件等。store/index.jsvuex安装时自动生成的状态相关文件用来让多个页面或组件共享数据。views存放页面文件比如默认生成的Home.vue首页、About.vue关于页面。App.vue是主vue模块主要是使用router-link 引入其他模块所有的页面都是在 App.vue下切换的。main.js是入口文件主要作用是初始化vue示例、引用某些组件库或挂载一些变量。 .eslintrc配置代码校验ESLint规则。 .gitignore配置git上传时想要忽略的文件。 babel.config.js一个工具链主要用于兼容低版本的浏览器。 package.json配置项目名称、版本号记录项目开发所安装的依赖的名称、版本号等。 package-lock.json记录项目安装依赖时各个依赖的具体来源和版本号。 4.安装Element UI Element UI是一套基于Vue 2.0的桌面端组件库其中的很多组件可以帮助我们快速搭建页面。进入file-web目录使用下面的指令安装Element UI。 npm i element-ui -S引入Element UI的方式在src/main.js中补充以下内容 import ElementUI from element-ui import element-ui/lib/theme-chalk/index.cssVue.use(ElementUI);4.1 组件的基本使用 进入element ui中文官网选择需要的组件引入即可这里选择一个按钮即可。 启动项目查看效果npm run serve
4.2 组件的属性 为按钮添加属性例如type“primary”此时就可以改变按钮的形状。 4.3 组件事件 启动项目查看效果npm run serve
5.创建顶部导航与路由 5.1 基本页面创建及路由添加 这里需要自己构建的文件所以将自动生成的文件删除保持整个项目的整洁。 在views文件夹下创建home.vue文件为其添加路由。 home.vue templatediv classhome这是网盘主页/div /templatescriptexport default {name: HomeView,data() {return {}},methods: {} } /script在src/router/index.js文件中需要引入vue-router模块、挂载在Vue上接着需要创建路由列表包含路径、路由名称、页面文件等配置之后创建路由实例并导出然后在 src/main.js中引入并使用即可。 index.js import Vue from vue import VueRouter from vue-router // 引入vue-router模块 import Home from ../views/Home.vue // 引入Home页面对应的文件Vue.use(VueRouter) // 将VueRouter挂载在Vue上const routes [{path: /, // 路由路径即浏览器地址栏中显示的URLname: Home, // 路由名称component: Home // 路由所使用的页面} ]// 创建路由实例 const router new VueRouter({mode: history, // HTML5 History 模式base: process.env.BASE_URL,routes })export default router在src/assets下新建style文件夹然后在该文件夹下新建base.styl文件设置所有元素的外边距和内边距均为 0px

• {margin: 0;padding: 0; }然后在src/main.js中引入此样式文件所有页面使用该样式。 import ./assets/style/base.styl最后创建其余的页面及路由添加。 Login.vue templatediv classlogin这是登录页面/div /templatescript export default {name: LoginView,data() {return {}},methods: {} } /scriptRegister.vue templatediv classregister这是注册页面/div /templatescript export default {name: RegisterView,data() {return {}},methods: {} } /scriptError_404.vue templatediv classerror-404此页面不存在……/div /templatescript export default {name: Error_404 } /script添加路由 import Vue from vue import VueRouter from vue-router // 引入vue-router模块 import Home from ../views/Home.vue // 引入Home页面对应的文件Vue.use(VueRouter) // 将VueRouter挂载在Vue上const routes [{path: /, // 路由路径即浏览器地址栏中显示的URLname: Home, // 路由名称component: Home // 路由所使用的页面},{path: /login, // 登录页面name: Login,component: () import(/* webpackChunkName: login / ../views/Login.vue)},{path: /register, // 注册页面name: Register,component: () import(/ webpackChunkName: register */ ../views/Register.vue)},{path: , // 404页面name: Error_404,component: () import(/ webpackChunkName: error_404 */ ../views/Error_404.vue)} ]// 创建路由实例 const router new VueRouter({mode: history, // HTML5 History 模式base: process.env.BASE_URL,routes })export default router为这些页面添加链接在src/App.vue中的中添加首页、登录、注册页面的跳转链接。 templatediv idappdiv idnavrouter-link to/首页/router-link |router-link to/login登录页面/router-link |router-link to/register注册页面/router-link |/divrouter-view //div /templatestyle langstylus #appfont-family Avenir, Helvetica, Arial, sans-serif-webkit-font-smoothing antialiased-moz-osx-font-smoothing grayscaletext-align centercolor #2c3e50margin-top 60px /style启动项目测试一下
  5.2 创建顶部导航栏 在src/components下创建文件 Header.vue。 templateel-menu :default-activeactiveIndex :routertrue modehorizontalel-menu-item indexHome :route{ name: Home }首页/el-menu-itemel-menu-item indexLogin :route{ name: Login }登录/el-menu-itemel-menu-item indexRegister :route{ name: Register }注册/el-menu-item/el-menu /templatescript export default {name: HeaderView,data() {return {}},computed: {// 当前激活菜单的indexactiveIndex() {return this.$route.name // 获取当前路由名称}} } /script其中的el-menu即为Element UI中的NavMenu导航菜单:routertrue表示使用 vue-router的模式 index是每个导航菜单的唯一标志这里配置为各个页面对应的路由名称 namedefault-active为当前激活菜单的 index为了刷新页面时也可以保证停留在当前页面这里采用计算属性的方式给activeIndex赋值。中的属性route为Vue Router路径对象即要跳转到的页面的路由对象。 在src/App.vue中引入、注册并使用此组件。 templatediv idapp!– 3.使用组件 –Header/Headerrouter-view//div /templatescript import Header from /components/Header.vue // 1.引入组件export default {name: App,// 2. 注册组件components: {Header} } /scriptstyle langstylus #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; } /style启动项目测试一下