脚本宝典收集整理的这篇文章主要介绍了

vue-cli 项目结构

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0"><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>-cli 项目结构</h1> <h2 id="articleHeader1">vue-cli</h2> <p>为我们搭建开发所需要的环境</p> <h2 id="articleHeader2">目录结构及主要功能</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.js // 构建本地服务器 | |-- utils.js // 构建工具相关 | |-- webpack.base.conf.js // webpack基础配置 | |-- webpack.dev.conf.js // webpack开发环境配置 | |-- webpack.prod.conf.js // webpack生产环境配置 |-- config // 项目开发环境配置 | |-- dev.env.js // 开发环境变量 | |-- index.js // 项目一些配置变量 | |-- prod.env.js // 生产环境变量 | |-- test.env.js // 测试环境变量 |-- src // 源码目录 | |-- components // vue公共组件 | |-- store // vuex的状态管理 | |-- App.vue // 页面入口文件 | |-- main.js // 程序入口文件,加载各种公共组件 |-- static // 静态文件,比如一些图片,json数据等 | |-- data // 群聊分析得到的数据用于数据可视化 |-- .babelrc // ES6语法编译配置 |-- .editorconfig // 定义代码格式 |-- .gitignore // git上传需要忽略的文件格式 |-- README.md // 项目说明 |-- favicon.ico |-- index.html // 入口页面 |-- package.json // 项目基本信息" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code> |-- build <span class="hljs-comment">// 项目构建(webpack)相关代码</span> | |-- build.js <span class="hljs-comment">// 生产环境构建代码</span> | |-- check-version.js <span class="hljs-comment">// 检查<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>、npm等版本</span> | |-- dev-client.js <span class="hljs-comment">// 热重载相关</span> | |-- dev-server.js <span class="hljs-comment">// 构建本地服务器</span> | |-- utils.js <span class="hljs-comment">// 构建工具相关</span> | |-- webpack.base.conf.js <span class="hljs-comment">// webpack基础配置</span> | |-- webpack.dev.conf.js <span class="hljs-comment">// webpack开发环境配置</span> | |-- webpack.prod.conf.js <span class="hljs-comment">// webpack生产环境配置</span> |-- config <span class="hljs-comment">// 项目开发环境配置</span> | |-- dev.env.js <span class="hljs-comment">// 开发环境变量</span> | |-- <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex.js <span class="hljs-comment">// 项目一些配置变量</span> | |-- prod.env.js <span class="hljs-comment">// 生产环境变量</span> | |-- test.env.js <span class="hljs-comment">// 测试环境变量</span> |-- src <span class="hljs-comment">// 源码目录</span> | |-- components <span class="hljs-comment">// vue公共组件</span> | |-- store <span class="hljs-comment">// vuex的状态管理</span> | |-- App.vue <span class="hljs-comment">// 页面入口文件</span> | |-- main.js <span class="hljs-comment">// 程序入口文件,加载各种公共组件</span> |-- <span class="hljs-keyword"><a href="http://www.js-code.com/tag/static" title="浏览关于“static”的文章" target="_blank" class="tag_link">static</a></span> <span class="hljs-comment">// 静态文件,比如一些图片,json数据等</span> | |-- data <span class="hljs-comment">// 群聊分析得到的数据用于数据可视化</span> |-- .<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>rc <span class="hljs-comment">// ES6语法编译配置</span> |-- .editorconfig <span class="hljs-comment">// 定义代码格式</span> |-- .gitignore <span class="hljs-comment">// git上传需要忽略的文件格式</span> |-- README.md <span class="hljs-comment">// 项目说明</span> |-- favicon.ico |-- index.html <span class="hljs-comment">// 入口页面</span> |-- <span class="hljs-keyword"><a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a></span>.json <span class="hljs-comment">// 项目基本信息</span></code></pre> <h2 id="articleHeader3">重要文件解释:</h2> <h3 id="articleHeader4">一、<a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</h3> <p><a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json文件是项目根目录下的一个文件,定义该项目开发所需要的各种模块以及一些项目配置信息.在项目根目录下运行<code>npm i</code>可以安装所需依赖包.<br />里面的scripts字段,定义了可以快速使用npm命令代替繁琐的命令执行文件,其中npm run dev相当于执行 <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a> build/dev-server.js 也就是开启了一个<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>写的开发行建议服务器,是相关命令的缩写.</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;scripts&quot;: { &quot;dev&quot;: &quot;node build/dev-server.js&quot;, &quot;build&quot;: &quot;node build/build.js&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"dev"</span>: <span class="hljs-string">"node build/dev-server.js"</span>, <span class="hljs-string">"build"</span>: <span class="hljs-string">"node build/build.js"</span> }</code></pre> <p>dependencies字段:项目运行所依赖的模块;<br />devDependencies字段: 指定项目开发所依赖的模块;</p> <h3 id="articleHeader5">二、webpack</h3> <p>dev-server.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 检查 Node 和 npm 版本 require('./check-versions')() // 获取 config/index.js 的默认配置 var config = require('../config') // 如果 Node 的环境无法判断当前是 dev / product 环境 // 使用 config.dev.env.NODE_ENV 作为当前的环境 if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) // 使用 NodeJS 自带的文件路径工具 var path = require('path') // 使用 express var express = require('express') // 使用 webpack var webpack = require('webpack') // 一个可以强制打开浏览器并跳转到指定 url 的插件 var opn = require('opn') // 使用 proxyTable var proxyMiddleware = require('http-proxy-middleware') // 使用 dev 环境的 webpack 配置 var webpackConfig = require('./webpack.dev.conf') // default port where dev server listens for incoming traffic // 如果没有指定运行端口,使用 config.dev.port 作为运行端口 var port = process.env.PORT || config.dev.port // Define HTTP proxies to your custom API backend // https://github.com/chimurai/http-proxy-middleware // 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置 var proxyTable = config.dev.proxyTable // 使用 express 启动一个服务 var app = express() // 启动 webpack 进行编译 var compiler = webpack(webpackConfig) // 启动 webpack-dev-middleware,将 编译后的文件暂存到内存中 var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, stats: { colors: true, chunks: false } }) // 启动 webpack-hot-middleware,也就是我们常说的 Hot-reload var hotMiddleware = require('webpack-hot-middleware')(compiler) // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { hotMiddleware.publish({ action: 'reload' }) cb() }) }) // proxy api requests // 将 proxyTable 中的请求配置挂在到启动的 express 服务上 Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === 'string') { options = { target: options } } app.use(proxyMiddleware(context, options)) }) // handle fallback for HTML5 history API // 使用 connect-history-api-fallback 匹配资源,如果不匹配就可以重定向到指定地址 app.use(require('connect-history-api-fallback')()) // serve webpack bundle output // 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上 app.use(devMiddleware) // enable hot-reload and state-preserving // compilation error display // 将 Hot-reload 挂在到 express 服务上 app.use(hotMiddleware) // serve pure static assets // 拼接 static 文件夹的静态资源路径 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) // 为静态资源提供响应服务 app.use(staticPath, express.static('./static')) // 让我们这个 express 服务监听 port 的请求,并且将此服务作为 dev-server.js 的接口暴露 module.exports = app.listen(port, function (err) { if (err) { console.log(err) return } var uri = 'http://localhost:' + port console.log('Listening at ' + uri + 'n') // when env is testing, don't need open it // 如果不是测试环境,自动打开浏览器并跳到我们的开发地址 if (process.env.NODE_ENV !== 'testing') { opn(uri) } })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code><span class="hljs-comment">// 检查 Node 和 npm 版本</span> <span class="hljs-keyword">require</span>(<span class="hljs-string">'./check-versions'</span>)() <span class="hljs-comment">// 获取 config/index.js 的默认配置</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> config = <span class="hljs-keyword">require</span>(<span class="hljs-string">'../config'</span>) <span class="hljs-comment">// 如果 Node 的环境无法判断当前是 dev / product 环境</span> <span class="hljs-comment">// 使用 config.dev.env.NODE_ENV 作为当前的环境</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) <span class="hljs-comment">// 使用 NodeJS 自带的文件路径工具</span> <span class="hljs-keyword">var</span> path = <span class="hljs-keyword">require</span>(<span class="hljs-string">'path'</span>) <span class="hljs-comment">// 使用 express</span> <span class="hljs-keyword">var</span> express = <span class="hljs-keyword">require</span>(<span class="hljs-string">'express'</span>) <span class="hljs-comment">// 使用 webpack</span> <span class="hljs-keyword">var</span> webpack = <span class="hljs-keyword">require</span>(<span class="hljs-string">'webpack'</span>) <span class="hljs-comment">// 一个可以强制打开浏览器并跳转到指定 url 的插件</span> <span class="hljs-keyword">var</span> opn = <span class="hljs-keyword">require</span>(<span class="hljs-string">'opn'</span>) <span class="hljs-comment">// 使用 proxyTable</span> <span class="hljs-keyword">var</span> proxyMiddleware = <span class="hljs-keyword">require</span>(<span class="hljs-string">'http-proxy-middleware'</span>) <span class="hljs-comment">// 使用 dev 环境的 webpack 配置</span> <span class="hljs-keyword">var</span> webpackConfig = <span class="hljs-keyword">require</span>(<span class="hljs-string">'./webpack.dev.conf'</span>) <span class="hljs-comment">// <a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a> port where dev server listens <a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a> incoming traffic</span> <span class="hljs-comment">// 如果没有指定运行端口,使用 config.dev.port 作为运行端口</span> <span class="hljs-keyword">var</span> port = process.env.PORT || config.dev.port <span class="hljs-comment">// Define HTTP proxies to your custom <a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a> backend</span> <span class="hljs-comment">// https://github.com/chimurai/http-proxy-middleware</span> <span class="hljs-comment">// 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置</span> <span class="hljs-keyword">var</span> proxyTable = config.dev.proxyTable <span class="hljs-comment">// 使用 express 启动一个服务</span> <span class="hljs-keyword">var</span> app = express() <span class="hljs-comment">// 启动 webpack 进行编译</span> <span class="hljs-keyword">var</span> compiler = webpack(webpackConfig) <span class="hljs-comment">// 启动 webpack-dev-middleware,将 编译后的文件暂存到内存中</span> <span class="hljs-keyword">var</span> devMiddleware = <span class="hljs-keyword">require</span>(<span class="hljs-string">'webpack-dev-middleware'</span>)(compiler, { <a href="http://www.js-code.com/tag/public" title="浏览关于“public”的文章" target="_blank" class="tag_link">public</a>Path: webpackConfig.output.publicPath, stats: { colors: <span class="hljs-keyword"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>, chunks: <span class="hljs-keyword"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span> } }) <span class="hljs-comment">// 启动 webpack-hot-middleware,也就是我们常说的 Hot-reload</span> <span class="hljs-keyword">var</span> hotMiddleware = <span class="hljs-keyword">require</span>(<span class="hljs-string">'webpack-hot-middleware'</span>)(compiler) <span class="hljs-comment">// force page reload when html-webpack-<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a> template changes</span> compiler.plugin(<span class="hljs-string">'compilation'</span>, <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> <span class="hljs-params">(compilation)</span> </span>{ compilation.plugin(<span class="hljs-string">'html-webpack-plugin-after-emit'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data, cb)</span> </span>{ hotMiddleware.publish({ action: <span class="hljs-string">'reload'</span> }) cb() }) }) <span class="hljs-comment">// proxy api requests</span> <span class="hljs-comment">// 将 proxyTable 中的请求配置挂在到启动的 express 服务上</span> <a href="http://www.js-code.com/tag/Object" title="浏览关于“Object”的文章" target="_blank" class="tag_link">Object</a>.keys(proxyTable).<span class="hljs-keyword">forEach</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(con<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>)</span> </span>{ <span class="hljs-keyword">var</span> <a href="http://www.js-code.com/tag/option" title="浏览关于“option”的文章" target="_blank" class="tag_link">option</a>s = proxyTable[context] <span class="hljs-keyword">if</span> (<a href="http://www.js-code.com/tag/typeof" title="浏览关于“typeof”的文章" target="_blank" class="tag_link">typeof</a> options === <span class="hljs-string">'string'</span>) { options = { target: options } } app.<span class="hljs-keyword">use</span>(proxyMiddleware(context, options)) }) <span class="hljs-comment">// handle f<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a>back for <a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>5 <a href="http://www.js-code.com/tag/history" title="浏览关于“history”的文章" target="_blank" class="tag_link">history</a> API</span> <span class="hljs-comment">// 使用 connect-history-api-fallback 匹配资源,如果不匹配就可以重定向到指定地址</span> app.<span class="hljs-keyword">use</span>(<span class="hljs-keyword">require</span>(<span class="hljs-string">'connect-history-api-fallback'</span>)()) <span class="hljs-comment">// serve webpack bundle output</span> <span class="hljs-comment">// 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上</span> app.<span class="hljs-keyword">use</span>(devMiddleware) <span class="hljs-comment">// enable hot-reload and state-preserving</span> <span class="hljs-comment">// compilation error display</span> <span class="hljs-comment">// 将 Hot-reload 挂在到 express 服务上</span> app.<span class="hljs-keyword">use</span>(hotMiddleware) <span class="hljs-comment">// serve pure static assets</span> <span class="hljs-comment">// 拼接 static 文件夹的静态资源路径</span> <span class="hljs-keyword">var</span> staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) <span class="hljs-comment">// 为静态资源提供响应服务</span> app.<span class="hljs-keyword">use</span>(staticPath, express.<span class="hljs-keyword">static</span>(<span class="hljs-string">'./static'</span>)) <span class="hljs-comment">// 让我们这个 express 服务监听 port 的请求,并且将此服务作为 dev-server.js 的接口暴露</span> module.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = app.listen(port, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(err)</span> </span>{ <span class="hljs-keyword">if</span> (err) { console.log(err) <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> } <span class="hljs-keyword">var</span> uri = <span class="hljs-string">'http://localhost:'</span> + port console.log(<span class="hljs-string">'Listening at '</span> + uri + <span class="hljs-string">'n'</span>) <span class="hljs-comment">// when env is testing, <a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>n't need <a href="http://www.js-code.com/tag/open" title="浏览关于“open”的文章" target="_blank" class="tag_link">open</a> it</span> <span class="hljs-comment">// 如果不是测试环境,自动打开浏览器并跳到我们的开发地址</span> <span class="hljs-keyword">if</span> (process.env.NODE_ENV !== <span class="hljs-string">'testing'</span>) { opn(uri) } })</code></pre> <p>webpack.base.config.js : webpack的基础配置文件</p> <p>.<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>rc : Babel解释器的配置文件,存放在根目录下、Babel是一个转码器,项目里需要用它将ES6代码转为ES5代码.<br />具体代码详解请翻到页面底部的引用地址...</p> <p>.editorconfig : 该文件定义项目的编码规范,编译器的行为会与.editorconfig文件中定义的一致,并且其优先级比编译器自身的设置要高,这在多人合作开发项目时十分有用而且必要。</p> <p>npm run build 命令<br />将写好的网页放到服务器上,运行该命令后,vue-cli会自动将项目打包,生成dist文件夹,这个文件夹就是我们要传到服务器上的文件.</p> <h3 id="articleHeader6">ma<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>.js文件</h3> <p>ma<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>.js是整个项目的入口文件,位于src文件夹下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Vue.config.productionTip = false //生产环境提示,这里设置成了false" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code style="word-break: break-word; white-space: initial;"><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.<span class="hljs-built_in">config</span>.productionTip = <span class="hljs-literal">false</span> //生产环境提示,这里设置成了<span class="hljs-literal">false</span></code></pre> <p>这里面最陌生的文件就是这句话,其他都是vue.js和ES6的写法,不多说.</p> <p>还有就是通过 <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> App from './App' 引入了App组件.</p> <h3 id="articleHeader7">app.vue文件</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>=" <template></p> <div id=&quot;app&quot;> <img src=&quot;./assets/logo.png&quot;><br /> <router-view></router-view> </div> <p> </template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> { <a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>: 'app' } </script></p> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-ser<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; <a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>-align: center; color: #2c3e50; margin-<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>: 60px; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./assets/logo.png"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr"><a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>: <span class="hljs-string">'app'</span> } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-id">#app</span> { <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Avenir'</span>, Helvetica, Arial, sans-serif; <span class="hljs-attribute">-webkit-font-smoothing</span>: antialiased; <span class="hljs-attribute">-moz-osx-font-smoothing</span>: grayscale; <span class="hljs-attribute">text-align</span>: center; <span class="hljs-attribute">color</span>: <span class="hljs-number">#2c3e50</span>; <span class="hljs-attribute">margin-<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a></span>: <span class="hljs-number">60px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>&lt;template&gt;&lt;/template&gt;标签里面是html结构,&lt;router-view&gt;&lt;/router-view&gt;是一个出口.<br />&lt;script&gt;&lt;/script&gt;标签为js内容<br />&lt;style&gt;&lt;/style&gt;为css内容,其中scoped声明样式只在模板中起作用.</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vue-cli 项目结构

全部内容,希望文章能够帮你解决

vue-cli 项目结构

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过