<p><code></p> <h2 id="articleHeader0">1. <code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a></code>简介</h2> <p>详细内容可以参考官网<a href="https://cn.vuejs.org/" rel="nofollow noreferrer" target="_blank">Vue.js</a></p> <h3 id="articleHeader1">1)兼容性</h3> <p><code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a></code> 不支持 <code>IE8 及以下版本</code>,因为 <code><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a></code> 使用了 IE8 无法模拟的 <code><a href="http://www.js-code.com/tag/ecmascript" title="ECMAScript" target="_blank">ECMAScript</a> 5</code> 特性。但它支持所有兼容 <code><a href="http://www.js-code.com/tag/ecmascript" title="ECMAScript" target="_blank">ECMAScript</a> 5</code> 的浏览器。</p> <p>目前<code><a href="http://www.js-code.com/tag/ecmascript" title="浏览关于“ECMAScript”的文章" target="_blank" class="tag_link">ECMAScript</a> 6</code>已经渐渐流行起来,但是有一些浏览器还不完全支持,所以在使用<code>ECMAScript 6</code>时,可以通过<code>Babel转码器</code>进行转换</p> <h3 id="articleHeader2">2)使用方式</h3> <p>(1) 直接用<code>&lt;script&gt;</code>引入</p> <p>直接在<code>html</code>页面中引入<code>&lt;script&gt;</code>,<code>Vue</code> 会被注册为一个全局变量。</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="<script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>这个适合单独的<code>H5</code>页面的使用</p> <p>(2)命令行工具<code>vue-cli</code></p> <p>适合构建大型应用,配合<code>npm</code>,<code>npm</code>能很好的和<code>webpack</code>等模块打包器配合使用。</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最新版 $ npm install vue" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code><span class="hljs-comment"># 全局安装vue最新版</span> $ npm <span class="hljs-keyword">install</span> vue</code></pre> <h2 id="articleHeader3">2. 环境搭建</h2> <h3 id="articleHeader4">1)安装<code><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>.js</code><br /> </h3> <p>傻瓜式安装,官网下载<code><a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>.js</code>,一路点击<code>下一步</code>安装。</p> <p>打开<code>命令行工具</code>,输入<code>node -v</code>,如果显示<code>node 版本号</code>,则表示安装成功。</p> <blockquote><p> <strong>注意:</strong>官网安装的<code>node.js</code>后,就已经自带<code>包管理工具npm</code> </p></blockquote> <h3 id="articleHeader5">2)安装淘宝镜像<code>cnpm</code>或是<code>yarn</code><br /> </h3> <p><strong>原因:</strong>这一步也可以省略,安装的理由是<code>npm</code>的服务器是外国,有时候我们安装依赖执行的操作超级慢,而<code>cnpm 或是 yarn</code>执行的速度较快,特别是在执行<code>npm indstall</code>时,淘宝镜像<code>cnpm install</code>和<code>yarn</code>相对比较明显的快。</p> <p><strong>淘宝镜像安装:</strong><br />打开<code>命令行工具</code>,输入</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=" npm install -g cnpm --registry= https://registry.npm.taobao.org" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"> npm install -g cnpm --registry= <span class="hljs-string">https:</span><span class="hljs-comment">//registry.npm.taobao.org</span></code></pre> <p>安装完后,通过<code>cnpm -v</code>查看版本号来判断是否安装成功</p> <p><strong>yarn</strong><br />参考官网教程<a href="https://yarn.bootcss.com/docs/install.html" rel="nofollow noreferrer" target="_blank">yarn 安装</a></p> <blockquote><p> <strong>注意:</strong>推荐使用淘宝镜像或是yarn,接下来下面都是用淘宝镜像执行的。</p></blockquote> <h3 id="articleHeader6">3)全局安装<code>vue-cli</code><br /> </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="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="# 全局安装 cnpm install -g vue-cli" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code><span class="hljs-comment"># 全局安装</span> cnpm <span class="hljs-keyword">install</span> -g vue-cli</code></pre> <p>同样通过<code>命令行工具</code>使用<code>vue -V</code> 查看版本号判断是否安装成功</p> <h2 id="articleHeader7">3. 构建项目</h2> <h3 id="articleHeader8">1)初始化一个项目</h3> <p>在一个文件夹下面初始化来新建一个工程项目,推荐使用<code>git</code>自带<code>Git Bash Here</code></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 init 是vue初始化项目 # webpack 是打包工具,其中也可以使用Browserify,感兴趣可以自行研究 # project 是自定义的项目名称 vue init webpack project" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code><span class="hljs-comment"># vue init 是vue初始化项目</span> <span class="hljs-comment"># webpack 是打包工具,其中也可以使用Browserify,感兴趣可以自行研究</span> <span class="hljs-comment"># project 是自定义的项目名称</span> <span class="hljs-attribute">vue</span> init webpack project</code></pre> <p>命令执行之后,会在当前目录下生成一个以<code>project</code>命名的项目文件夹。</p> <p>命令执行时会显示下列选项:</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 init webpack project--------------------- 安装vue脚手架的命令,采用webpack打包工具,项目名是project This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目 For Vue 1.x use: vue init webpack#1.0 project ? Project name (project) ---------------------项目名称 ? Project name project ? Project description (A Vue.js project) ---------------------项目描述 ? Project description A Vue.js project ? Author wujy--------------------- 项目创建者 ? Author wujy ? Vue build (Use arrow keys) ? Vue build standalone ? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,推荐安装,是页面跳转用的 ? Install vue-router? Yes ? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no,因为这里有很多的坑,具体以后会讲 ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? (Y/n) n ----------------是否安装单元测试,因人而异,可以自行选择 ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? (Y/n) n --------------------是否安装e2e测试,可自行选择 ? Setup e2e tests with Nightwatch? No vue-cli · Generated &quot;project&quot;. To get started: --------------------- 这里说明如何启动这个服务 cd project --------------------进入项目文件夹 npm install ---------------------安装依赖,推荐使用淘宝镜像cnpm npm run dev -----------------------项目运行" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>$ vue init webpack project<span class="hljs-comment">--------------------- 安装vue脚手架的命令,采用webpack打包工具,项目名是project</span> This will <span class="hljs-keyword">install</span> Vue <span class="hljs-number">2.</span>x <span class="hljs-keyword">version</span> <span class="hljs-keyword">of</span> the template. <span class="hljs-comment">---------------------这里说明将要创建一个vue 2.x版本的项目</span> <span class="hljs-keyword">For</span> Vue <span class="hljs-number">1.</span>x <span class="hljs-keyword">use</span>: vue init webpack<span class="hljs-comment">#1.0 project</span> ? <span class="hljs-keyword">Project</span> <span class="hljs-keyword">name</span> (<span class="hljs-keyword">project</span>) <span class="hljs-comment">---------------------项目名称</span> ? <span class="hljs-keyword">Project</span> <span class="hljs-keyword">name</span> <span class="hljs-keyword">project</span> ? <span class="hljs-keyword">Project</span> description (A Vue.js <span class="hljs-keyword">project</span>) <span class="hljs-comment">---------------------项目描述</span> ? <span class="hljs-keyword">Project</span> description A Vue.js <span class="hljs-keyword">project</span> ? Author wujy<span class="hljs-comment">--------------------- 项目创建者</span> ? Author wujy ? Vue <span class="hljs-keyword">build</span> (<span class="hljs-keyword">Use</span> arrow <span class="hljs-keyword">keys</span>) ? Vue <span class="hljs-keyword">build</span> <span class="hljs-keyword">standalone</span> ? <span class="hljs-keyword">Install</span> vue-router? (Y/n) <span class="hljs-comment">--------------------- 是否安装Vue路由,推荐安装,是页面跳转用的</span> ? <span class="hljs-keyword">Install</span> vue-router? Yes ? <span class="hljs-keyword">Use</span> ESLint <span class="hljs-keyword">to</span> lint your code? (Y/n) n <span class="hljs-comment">---------------------是否启用eslint检测规则,这里个人建议选no,因为这里有很多的坑,具体以后会讲</span> ? <span class="hljs-keyword">Use</span> ESLint <span class="hljs-keyword">to</span> lint your code? <span class="hljs-keyword">No</span> ? Setup unit tests <span class="hljs-keyword">with</span> Karma + Mocha? (Y/n) n <span class="hljs-comment">----------------是否安装单元测试,因人而异,可以自行选择</span> ? Setup unit tests <span class="hljs-keyword">with</span> Karma + Mocha? <span class="hljs-keyword">No</span> ? Setup e2e tests <span class="hljs-keyword">with</span> Nightwatch? (Y/n) n <span class="hljs-comment">--------------------是否安装e2e测试,可自行选择</span> ? Setup e2e tests <span class="hljs-keyword">with</span> Nightwatch? <span class="hljs-keyword">No</span> vue-cli · <span class="hljs-keyword">Generated</span> <span class="hljs-string">"project"</span>. <span class="hljs-keyword">To</span> <span class="hljs-keyword">get</span> started: <span class="hljs-comment">--------------------- 这里说明如何启动这个服务</span> cd <span class="hljs-keyword">project</span> <span class="hljs-comment">--------------------进入项目文件夹</span> npm <span class="hljs-keyword">install</span> <span class="hljs-comment">---------------------安装依赖,推荐使用淘宝镜像cnpm</span> npm run dev <span class="hljs-comment">-----------------------项目运行</span></code></pre> <h3 id="articleHeader9">2)运行项目</h3> <p>执行上述操作之后,可以看到本地多了一个<code>project文件夹</code></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="# 运行项目 cd project ------------进入工程目录 cnpm install -------------安装依赖,如果要具体安装其他模块可以单独使用,具体以后讲 # 执行之后,目录里多了一个node_modules文件夹,这里放的就是所有依赖的模块 cnpm run dev ------------运行项目 # 打包工作,用于正式环境 cnpm run build" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code><span class="hljs-comment"># 运行项目</span> cd project <span class="hljs-comment">------------进入工程目录</span> cnpm <span class="hljs-keyword">install</span> <span class="hljs-comment">-------------安装依赖,如果要具体安装其他模块可以单独使用,具体以后讲</span> <span class="hljs-comment"># 执行之后,目录里多了一个node_modules文件夹,这里放的就是所有依赖的模块</span> cnpm run dev <span class="hljs-comment">------------运行项目</span> <span class="hljs-comment"># 打包工作,用于正式环境</span> cnpm run <span class="hljs-keyword">build</span></code></pre> <p>本地<code>localhost:8080</code>就可以打开一个<code>HelloWorld.vue</code>,默认服务器启动的是<code>8080</code>端口,当然也可以通过更改配置来修改默认端口</p> <h2 id="articleHeader10">4. 文件目录分析</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-versions.js ----------检查node、npm等版本 utils.js ------------------------构建工具相关 vue-loader.conf.js ---------css加载器的配置 webpack.base.conf.js ---webpack的基础配置信息 webpack.dev.conf.js -----webpack开发环境配置信息,构建开发本地服务器 webpack.prod.conf.js ---wenpack生产环境配置信息 config -------------------配置目录,包括端口号,打包输出等的vue基本配置文件 dev.env.js -----------开发环境变量 prod.env.js -----------生产环境变量 index.js -------------项目的配置变量,端口号等 node_modules -----------加载的项目依赖模块 static -------------------静态资源目录 index.html ---------------首页的入口文件,可以添加meta等参数 README.md ---------------项目的说明文档,makedown格式 src -----------------------源码目录,主要的开发 assets ---------------静态资源,css,image等可以存放 components -----------公共组件 router ---------------路由文件夹,配置页面跳转 views ----------------页面编写的地方,(可以自行定义命名) main.js ------------------入口文件,全局的配置和加载 .babelrc -----------------ES6语法编译配置,用来将es6代码转换成浏览器可识别的es5代码 .gitignore ---------------git上传需要忽略的文件的格式 package.json -------------项目的基本信息,包括开发所需要的模块、项目名称、版本号等 .postcssrc.js ------------转换css的工具 .editorconfig ------------定义代码格式" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>build <span class="hljs-comment">-------------------项目构建相关代码(webpack配置)</span> build.js <span class="hljs-comment">-------------生产环境构建代码</span> <span class="hljs-keyword">check</span>-versions.js <span class="hljs-comment">----------检查node、npm等版本</span> utils.js <span class="hljs-comment">------------------------构建工具相关</span> vue-loader.conf.js <span class="hljs-comment">---------css加载器的配置</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">---wenpack生产环境配置信息</span> config <span class="hljs-comment">-------------------配置目录,包括端口号,打包输出等的vue基本配置文件</span> dev.env.js <span class="hljs-comment">-----------开发环境变量</span> prod.env.js <span class="hljs-comment">-----------生产环境变量</span> index.js <span class="hljs-comment">-------------项目的配置变量,端口号等 </span> node_modules <span class="hljs-comment">-----------加载的项目依赖模块</span> <span class="hljs-keyword">static</span> <span class="hljs-comment">-------------------静态资源目录</span> index.html <span class="hljs-comment">---------------首页的入口文件,可以添加meta等参数</span> README.md <span class="hljs-comment">---------------项目的说明文档,makedown格式</span> src <span class="hljs-comment">-----------------------源码目录,主要的开发</span> assets <span class="hljs-comment">---------------静态资源,css,image等可以存放</span> components <span class="hljs-comment">-----------公共组件</span> router <span class="hljs-comment">---------------路由文件夹,配置页面跳转</span> views <span class="hljs-comment">----------------页面编写的地方,(可以自行定义命名)</span> main.js <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语法编译配置,用来将<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>代码转换成浏览器可识别的<a href="http://www.js-code.com/tag/es5" title="浏览关于“es5”的文章" target="_blank" class="tag_link">es5</a>代码</span> .gitignore <span class="hljs-comment">---------------git上传需要忽略的文件的格式</span> package.json <span class="hljs-comment">-------------项目的基本信息,包括开发所需要的模块、项目名称、版本号等</span> .postcssrc.js <span class="hljs-comment">------------转换css的工具</span> .editorconfig <span class="hljs-comment">------------定义代码格式</span></code></pre> <blockquote><p> <strong>综上所述:</strong><br />详细文件的分析可以参考官网<a href="https://cn.vuejs.org/" rel="nofollow noreferrer" target="_blank">vue.js</a><br />初次尝试vue,可以用普通的引入<code>javascript文件</code>的方法。如果有一定的基础,可以用<code>vue-cli</code>脚手架进行进阶的操作</p></blockquote> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26109.html