Vue完整项目构建(进阶篇) - 行业资讯 - 肥雀云

<强>前置条件:

<李>熟悉使用Javascript + HTML5 + css3。　　<李>理解ES2015模块模块(出口、进口、export-default)。　　<李>了解nodejs基础知识,npm常用命令,以及npm脚本使用(vue项目中使用npm进行包管理)。　　<李>了解webpack打包工具(常用配置选项以及装载机概念)。(webpack webpack.github.io/,是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块,找出它们的依赖关系,将它们打包为可部署的静态资源.webpack的使用也需要npm的安装方式)。

<强>开始安装:

使用vue-cli构建大型单页应用:vue。js的脚手架工具。

执行下述代码,即可完成项目基础构建(已配置好webpack,依赖包的安装,基本目录的生成)。

　　　　　　#全局安装vue-cli 　　npm安装全球vue-cli美元　　#创建一个基于webpack模板的新项目　　美元vue init webpack我的项目　　#安装依赖,走你　　$ cd我的项目　　美元npm安装　　美元npm运行dev 　　　　

<强>主要目录:

　　　　　　├──建立//webpack的基本配置,开发环境配置,生产环境配置　　├──配置//路径,端口以及反向代理配置　　├──dist//webpack打包后的静态资源　　├──node_modules//npm安装的依赖包　　├──src//前端主文件　　│├──资产//静态资源　　││├──字体　　││├──img 　　││└──scss 　　│├──组件//单个组件　　││├──xxx。vue//单文件组件　　│├──路由器//路由配置　　│├──商店//全局变量　　│├──App.vue//应用程序组件　　│├──主要。js主入口文件　　├──静态//静态文件　　├──.babelrc//巴别塔的配置项　　├──.editorconfig//编辑器的配置项　　├──.gitignore//会忽略语法检查的目录　　├──指数。html//入口页面　　├──包。json//项目的描述和依赖　　　　

package.json文件说明:项目的描述和依赖

1。脚本:编译项目的一些命令

例:执行<代码> npm dev> 节点构建/dev-server.js>

2。依赖性:项目发布时的依赖

例:执行<代码> npm安装wx -保存>

3。devDependencies:项目开发时的依赖

例:执行<代码> npm安装sass——save-dev>

附:npm相关说明:

npm为节点。js版本管理和依赖包管理工具,通过节点环境来安装前端构建项目所需依赖包。

npm安装下载速度过慢,使用淘宝镜像<代码> cnpm安装> 　　　　　　美元npm安装- g cnpm——注册表=https://registry.npm.taobao.org

<强>项目加载过程:

Vue完整项目构建(进阶篇)”>,
　　 1。索引。html页面
　　当前构建项目为温泉(单页面应用),索引。html页面即为入口页面,进行元等相关页面配置。
　　 & # 8203;该页面的<代码> & lt; div id=坝τ贸绦颉痹? lt;/div></代码>挂载了主组件。
　　 2。main.js:主入口文件
　　 & # 8203;注:在<代码> webpack.base。配置> </代码中设置→<代码>条目:{应用:“。/src/main.js} </代码> 
　　 & # 8203;该文件初始化vue实例并引入相应模块(引入前需确认在包中。json中进行配置并安装),附主要。js引入及说明:
　　
　　<pre类= 　　& # 8203;从“Vue”//进口Vue引入Vue 　　& # 8203;进口程序”。/应用程序//引入主组件App.vue 　　& # 8203;从“进口路由器。/路由器//引入路由配置文件　　& # 8203;从“axios”//进口axios引入网络请求工具axios

3。App.vue:主组件

& # 8203;在索引。html入口页面中挂载了主组件,并在主要。js主入口文件中引入了主组件。

& # 8203;创建了其他组件(例:/src/组件/xxx。vue)后,通过路由配置即可渲染在当前主组件中。

4。路由配置vue-router

& # 8203;路由配置:将组件(组件)映射到路由(路线),然后告诉vue-router在哪里渲染它们

　　　　　　npm安装vue-router 　　从“Vue”进口Vue 　　从“vue-router”进口路由器　　Vue.use(路由器)//1。定义(路由)组件:进口(当前应用中为单文件组件)。　　从“. ./组件/Home.vue”进口回家//2。定义路由并创建路由器实例,然后传“路线”配置//每个路由应该映射一个组件。　　var路由器={} 　　出口默认路由器=new路由器({ 　　路线:[ 　　{ 　　路径:“/? 　　名称:“回家”, 　　组件:回家　　} 　　] 　　})//3。在main.js主入口文件中创建和挂载根实例。//记得要通过路由器配置参数注入路由,//从而让整个应用都有路由功能　　新Vue ({ 　　埃尔:“#应用”, 　　路由器, 　　模板:& lt; App/祝辞, 　　组件:{应用} 　　})//现在,应用已经启动了!