0
点赞
收藏
分享

微信扫一扫

vue-cli脚手架（框架）

他说Python 2022-05-30 阅读 98
ioscssjson虚拟化云计算

一、创建vue项目

npm install vue-cli -g   #-g全局
(sudo)npm install vue-cli -g   #mac笔记本

vue-init webpack myvue  #项目的名字
cd muvue
npm install
npm run dev

vue-cli脚手架（框架）_css

 

? Project name myvue              --项目名
? Project description A Vue.js project
? Author Mark-IT <269773075@qq.com>    --作者，默认git账户名
? Vue build standalone                   --vue构建
? Install vue-router? Yes                --安装vue路由
? Use ESLint to lint your code? Yes      --使用eslint链接代码
? Pick an ESLint preset Standard
? Set up unit tests No                 --设置单元测试
? Pick a test runner jest                --选择一个测试运行
? Setup e2e tests with Nightwatch? Yes  --用nightwatch设置e2e测试
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "myvue".

vue-cli脚手架（框架）_json_02

不过中途有可能会因为是国外服务器的缘故有些包安装错误，错误的时候继续执行npm install

 好了之后执行上边黄色指令运行项目

vue-cli脚手架（框架）_css_03

 

vue-cli脚手架（框架）_ios_04

 

修改成true后，执行npm run dev，出现下面这样的图就说明成功了

 

vue-cli脚手架（框架）_ios_05

虽然完成了，但是速度太慢了，建议使用淘宝镜像安装，快！

首先我们需要下载npm，因为我已经提前安装了node.js,安装包里面集成了npm，然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。 
1.打开命令行窗口，输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
获取到cnpm以后，我们需要升级一下，输入下面的命令
cnpm install cnpm -g
因为安装Vue需要npm的版本大于3.0.0，所以我们要升级一下，

然后我们输入下面的命令，安装vue
cnpm install vue
接下来安装vue-cli
cnpm install --global vue-cli
此时环境就搭建好了。
2.接下来我们需要指定一个目录存放我们的项目，可以选择任意路径，确定好路径后输入下面的命令
vue init webpack "项目名称"
3.成功以后，我们进入项目所在目录
cd "项目所在文件夹"
然后依次输入下面的命令
cnpm install 
cnpm run dev

 

二、目录结构的说明

vue-cli脚手架（框架）_css_06

简单介绍：

​​build​​目录是一些webpack的文件，配置参数什么的，一般不用动

​​config​​是vue项目的基本配置文件 

​​node_modules​​是项目中安装的依赖模块 

​​src​​源码文件夹，基本上文件都应该放在这里。

　　—​​assets​​ 资源文件夹，里面放一些静态资源 
　　—​​components​​这里放的都是各个组件文件 
　　—​​App.vue​​ App.vue组件 
　　—​​main.js​​入口文件 

​​static​​生成好的文件会放在这个目录下。

​​test​​测试文件夹，测试都写在这里 

​​.babelrc​​ babel编译参数，vue开发需要babel编译 
​​.editorconfig​​ 编辑器的配置文件 
​​.gitignore​​ 用来过滤一些版本控制的文件，比如node_modules文件夹 ，一般在githubpush文件的时候需要用到
​​index.html​​ 主页 
​​package.json​​ 项目文件，记载着一些命令和依赖还有简要的项目描述信息 
​​README.md​​ 介绍自己这个项目的，随便写，让别人看得懂就行，看不懂就算了

详细介绍：

1、package.json
　　package.json文件是项目的配置文件，除了一些项目的基本配置信息，还有几个地方需要重点记忆
　　　　dependcies：项目发布时的依赖
　　　　devDependencies：项目开发时的依赖
　　　　scripts：编译项目时的一些命令
2、.babellrc文件：
　　.babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码
　　　　{ 
　　　　　　"presets": ["es2015", "stage-2"],
　　　　　　 "plugins": ["transform-runtime"],
　　　　　　 "comments": false 
　　　　}
3、index.html
　　主页我们可以像平时普通的html文件一样引入文件和书写基本信息，添加meta标签等。
4、main.js
　　这里是入口文件，可以引入一些插件或者是静态资源，引入之前要确定已经安装了该插件，记录可以在package.json文件中查看
　　/*引入Vue框架*/ 
　　import Vue from 'vue' 
　　/*引入资源请求插件*/ 
　　import VueResource from 'vue-resource' 
　　/*重置样式*/ 
　　import "assets/css/base.css" 
　　/*基本JS*/ 　　
　　import "assets/js/common.js" 
　　/*引入路由设置*/ 
　　import "./routers.js" 　　
　　/*使用VueResource插件*/ 
　　Vue.use(VueResource)
5、App.vue
　　这个是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式

 

​​http://www.jb51.net/article/111658.htm​​

 

三、import和require的区别

import一定要放在文件顶部，他相当于一个指针引用了文件，并没有吧文件包含进来，需要调用文件时才引入
require可以把文件放在任何位置，他是把文件直接包含进来

 

四、设置文件路径的流程

1）建立组件（.vue的文件）
2）配置路由（index.js文件中配置）
3）
4)
5)import 包名 from "组件路径"
6)comonents进行注册

 

五、实现异步加载

//异步
vue-resource:实现异步加载数据（已经弃用）
axios：实现异步加载数据
npm install axios --save-dev
npm install vue-axios --save-dev

 

六、VUE的生命周期

1、定义vue对象并实例化
2、执行created函数
3、编译模板，只会编译template的模板
4、把HTML元素渲染到页面当中
5、执行mounted函数，（加载）相当于onload
6、如果有元素的更新，就执行update函数
7、销毁实例

 

 

七、仿抽屉网站

ALL.vue

vue-cli脚手架（框架）_ios_07vue-cli脚手架（框架）_ios_08






View Code

Detail.vue

vue-cli脚手架（框架）_ios_07vue-cli脚手架（框架）_ios_08






View Code

DUANZI.vue

vue-cli脚手架（框架）_ios_07vue-cli脚手架（框架）_ios_08






View Code

NaveList.vue

vue-cli脚手架（框架）_ios_07vue-cli脚手架（框架）_ios_08






View Code

NEWS.vue

vue-cli脚手架（框架）_ios_07vue-cli脚手架（框架）_ios_08






View Code

index.js

vue-cli脚手架（框架）_ios_07vue-cli脚手架（框架）_ios_08

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ALL from '@/components/All'
import NEWS from '@/components/NEWS'
import DUANZI from '@/components/duanzi'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/hw',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'ALL',
      component: ALL
    },
    {
      path: '/news',
      name: 'NEWS',
      component: NEWS
    },
    {
      path: '/duanzi',
      name: 'duanzi',
      component: DUANZI
    },
    {
      path: '/detail',
      name: 'Detail',
      component: Detail
    },


  ]
})

View Code

vue-cli脚手架（框架）_ios_07vue-cli脚手架（框架）_ios_08

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ALL from '@/components/All'
import NEWS from '@/components/NEWS'
import DUANZI from '@/components/duanzi'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/hw',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'ALL',
      component: ALL
    },
    {
      path: '/news',
      name: 'NEWS',
      component: NEWS
    },
    {
      path: '/duanzi',
      name: 'duanzi',
      component: DUANZI
    },
    {
      path: '/detail',
      name: 'Detail',
      component: Detail
    },


  ],
  mode:"history" //去掉地址栏中的  #
})

去掉地址栏中的#

App.vue

vue-cli脚手架（框架）_ios_07vue-cli脚手架（框架）_ios_08





View Code

main.js 

vue-cli脚手架（框架）_ios_07vue-cli脚手架（框架）_ios_08

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'

// Vue.prototype.$axios = axios; //方式一

Vue.use(VueAxios,axios); //方式二，注册axios
//Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

View Code

 

 项目需要注意的问题

 问题一：在手动执行webpack app/a.js publicndle.js打包时出错的解决方法需要修改为： require("style-loader!css-loader!./style.css")  问题2：脚手架生成项目后，运行 npm run dev启动项目后，

             如果想把地址栏中的  #去掉，如：http://localhost:8080/#/news，需要在

             router文件夹下的index.js文件中，加入 mode: "history"


问题三：引入axios的2种方法：
　　　　需要在main.js中进行设置：这2种方法都可以，但引用顺序不能翻转。

vue-cli脚手架（框架）_json_27


举报

相关推荐

Vue-cli脚手架

深度学习论文阅读人工智能

使用 Vue-cli 脚手架创建项目

插入图片命令行htmlJavaScript前端开发yyds干货盘点

新版Vue + 脚手架Vue-Cli 4.3 安装

vue.jsnpm前端

【Vue系列】Vue-cli（Vue脚手架）详细教程

vue.js前端

Vue2.0 搭建Vue脚手架（vue-cli）

vue.jsnode.js

Vue CLI脚手架

html依赖包css代码人生

vue-cli vue脚手架常用项目安装

vue.js前端javascript

webpack和vue-cli脚手架的详解

web前端Vue让前端飞

20230623----重返学习-vue-cli脚手架

rabbitmq学习

vue-cli vue的脚手架 快速创建vue工程

构建工具初始化Redis数据库
0 条评论