2.安装vue脚手架输入：vue init webpack price。注意，这里的“价格”是项目名称，可以说是随便起名，但要注意“不能用中文，也不能用大写字母”。 Vue init webpack price-------这是安装Vue脚手架的命令 这将安装模板的版本。------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 使用：vue init WebPack？项目名称（价格）------项目名称？项目名称exprice？项目描述（一个项目）-------项目描述？项目描述一个项目？作者曼陀罗--项目创建者？作者曼陀罗？Vue构建（使用箭头键）？Vue独立构建？安装VUE-Router？（Y/N）--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------什么事？使用ESLint来梳理代码？（y/n）n-- 是否启用eslint检测规则，我建议不要？使用ESLint来梳理代码？没有？用Karma+Mocha设置单元测试？（Y/N）？用Karma+Mocha设置单元测试？什么事？用夜间手表设置e2e测试？（Y/N）？用夜间手表设置e2e测试？是的 Vue-cli·生成“价格”。 Toget start：------以下是如何启动服务 光盘价格 Npm运行开发程序 http://www.zhucesz.com/命令进入创建的项目目录，首先cd exprice（这里是自建项目的名称），然后npm run dev启动服务器。服务启动成功后，浏览器会默认打开一个“欢迎页面”，如图所示。 注意：这是启动本地8080端口的默认服务，所以请确保您的8080端口没有被其他程序占用。 三。目录简介 创建的“price”目录如下： 简要说明每个目录的作用： 总体框架：一个vue-cli项目结构如下，其中的src文件夹是需要掌握的，所以本文还重点介绍了文档，至于其他相关文档，大家可以了解一下。 IV.文件结构的细分 1.构建--[webpack配置] 构建文件主要是webpack的配置，主启动文件是当我们进入npm运行dev时先 首先，它检查节点和npm版本，加载配置文件，并启动服务。 2.配置--[vue项目配置] 配置文件主要是与项目相关的配置，我们常用在端口冲突时配置监听端口、包输出路径和命名等 http://www.zhucesz.com/[依赖包] Node_modules是项目依赖项包，其中包括许多基本依赖项，您可以根据需要安装其他依赖项。 安装方法是打开cmd，进入项目目录，输入npm install[依赖包名]，输入。 我们自己安装依赖项有两种情况： （1）项目在没有这个依赖包的情况下运行：例如项目用来加载外部css的css-loader、路由跳转vue-loader等（安装方法示例：npm安装css-loader） （2）安装插件：如vux（基于WEUI的移动组件库）和vue-swiper（旋转木马插件） 注意：有时会安装指定的依赖版本，需要在依赖包名称后添加版本号信息，如安装vue-loader版本，输入npm install vue-loader http://www.zhucesz.com/[项目核心文件] 前面已经简要说明了项目的核心文件，然后重点是它，以及路由器的 五、脚手架规范详解 让我们看看创建的项目目录中的主要文件： http://www.zhucesz.com/[家] 这没什么好说的，只是一个简单的html页面，其中id='app'与稍后设置vue范围有关。 和其他html一样，但一般只定义一个空的根节点，其中定义的实例将挂载在根节点下，内容将用vue组件填充 2.文件： 注：在*中。Vue文件中，模板标签写html代码，模板直接子标签只能有一个。在style标记中编写style，并在脚本中编写js代码。 3.文件:--[根组件] //这用于显示路由页面的内容。如果你想用跳转，就用它 名称：“应用程序”} 字体家族:'Avenir'、Helvetica、Arial、sans-serif；-webkit-font-mousing：抗锯齿；-Moz-OSX-字体平滑：灰度； 文本对齐：居中； 颜色:2C3E50； 边距：60px； } 一个vue页面通常由三部分组成：模板、js（脚本）和样式： “模板” 模板只能包含一个父节点，也就是说，顶层div只能有一个（例如下图中，父节点是app的div，它没有同级节点） 子路由视图，其中显示所有后续路由页面。打个比喻，类似于槽。当您跳转到某个路由时，该路由下的页面将插入此插槽并呈现 “剧本” Vue通常用es6编写，并以导出默认导出，可以包含数据、生命周期（挂载等）、方法等，具体语法请看文档，后面我会举例说明。 “风格” 样式由样式标签包装，默认情况下影响整个世界。如果您需要定义仅在此组件下工作的范围，则需要将sc添加到标签中 Oped， 要导入外部css文件，首先为项目安装css-loader依赖项包，打开cmd，进入项目目录，键入npm install css-loader并输入。安装完成后，可以在样式选项卡下导入所需的css文件，例如： 这样我们就可以将样式封装在style下，写到css文件夹中，然后引入页面，整个vue页面看起来更加简洁。 4.文件:--[参赛文件] 这个js文件是主页配置的主条目。主要利用ES6的模块化介绍了模板 主要介绍了vue框架、根组件和路由设置，并定义了vue实例。以下代码中的组件：{App}是引入的根组件 后期还可以引入插件，当然必须先安装插件。 //要用`import`命令加载的Vue构建版本//（仅运行时或独立运行时）已用别名设置。 从“Vue”导入Vue//引入Vue文件 从“./App”导入应用程序//在同一目录中引入模块 从“./router”//引入vue的路由中导入路由器 =假 /*eslint-禁用no-new*/ NewVue（{ EL：'app',//定义id为app的作用域内的作用域 路由器，//引入路由 组件：{App}，//注册导入的组件 模板：''//为Vue实例提供一个初始的应用程序组件，作为与默认组件等效的模板 }） 5.路由器--[路由配置] 在路由器文件夹下，有一个，它是路由配置文件 从“Vue”//引用Vue文件中导入Vue 从'vue-router'//导入Router引用vue路由模块并为变量Router赋值 从'/components/HelloWorld'//English模板导入HelloWorld，并为变量HelloWorld赋值，其中“”等效于“../” （路由器）//使用路由 Exportdefault newRouter（{ 路由:[//配置路由，指定将“/”引入到HelloWorld组件中 { 路径:'/'， 名称:'HelloWorld'，//这个名称暂时不知道该用什么。根据公文，方便排除故障 组件：HelloWorld//注册HelloWorld组件 } ] }） 此处定义了路径为'/'的路由，与此路由对应的页面是HelloWorld组件，因此当我们访问浏览器url中的http://localhost:8080//时，将呈现Hello组件 同样，我们可以设置多个路由，'/index'、'/list'等，当然，我们得先引入这个组件，然后再为这个组件设置路由。 说明：如果需要添加组件，可以在组件文件下定义文件和代码；如有必要 路由配置要求路由“路径”配置；您还需要单击跳转来使用标签。