开发学院

您的位置:首页>教程>正文

教程正文

VueJS 安装配置

VueJS 安装配置

  我们可以通过多种方式在项目中集成Vue,下面是最简单直接的方法:

<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

  访问VueJS的主页,根据需要下载vue.js。网站有两个版本可供选择:生产版本和开发版本。生产版本会经过压缩并且隐藏调试信息,开发版会输出一些debug信息这样助于项目的调试。

使用CDN

  我们还可以从CDN库引用VueJS文件。https://unpkg.com/vue将提供最新版本的VueJS。VueJS还可在以下网站上获得: (https://cdn.jsdelivr.net/npm/vue/dist/vue.js)和(https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js).。

使用NPM安装

  对于大规模应用程序,建议使用NPM程序包进行安装。它附带了浏览器和Webpack以及其他必要的工具,这些工具有助于开发。以下是使用NPM安装的命令。

npm  install vue

使用CLI命令行

  VueJS还提供CLI来安装vue,要使用CLI安装,需要使用以下命令安装CLI。

npm install --global vue-cli

cli_command_line.jpg

  安装完成后,它将显示VueJS的CLI版本。根据网络情况安卓过程大概需要几分钟。

+ vue-cli@2.8.2
added 965 packages in 355.414s

  以下是使用Webpack创建项目的命令。

vue init webpack myproject

select_command_prompt.jpg

  输入下面的命令来开始初始化项目

cd myproject
npm install
npm run dev

command_prompt.jpg

npm.jpg

  执行NPM运行dev后,它将启动服务器并提供在浏览器中显示的URL,如下图所示。

welcome_to_vuejs.jpg

下面是项目的结构

cli.jpg