Vue:环境搭建

最新推荐文章于 2024-05-15 09:32:25 发布

《源码好优多》

最新推荐文章于 2024-05-15 09:32:25 发布

阅读量1.6k

点赞数

分类专栏： vue.js 文章标签： Vue Vue环境搭建 vue环境配置 vue-cli vue.js

本文链接：https://blog.csdn.net/qq_32340877/article/details/79092310

版权

vue.js 专栏收录该内容

73 篇文章 2 订阅

订阅专栏

1.1.1 安装 Node.js

一般来讲, 可以用以下三种方式安装 Node.js：

通过安装包安装(Windows 和 Mac 用户推荐)
通过源码编译安装(Linux用户推荐)
在 Linux 下可以通过 yum|apt-get 安装

Windows 和 Mac 安装：

第一步:

打开 Node官网，往下面拉，就可以看到有两个下载选项：

左边的是 LTS 版,就是长期支持的稳定版本，一般人都用这个版本。
右边是最新版本，支持很多最新的语言特征，对es6有更多的支持。(可以在 http://node.green 上面获取到 Node.js 各个版本对 ES6 的支持情况。)
我们选择左边的版本点击下载。

第二步:

下载好了安装包,打开,一直点击继续就可以安装好了。

第三步：

安装成功后，打开终端输入下面的命令。就可以看到自己的node 和npm 安装好了没有。

Linux 用户安装：

Linux 用户可通过源码编译安装：

      
      
       
       curl -O https:
       
       //nodejs.org/dist/v6.10.3/node-v6.10.3.tar.gz
      
      
      
      
       
       tar -xzvf node-v6
       
       .10
       
       .3.tar.gz
      
      
      
      
       
       cd  node-v6
       
       .10
       
       .3
      
      
      
      
       
       ./configure
      
      
      
      
       
       make
      
      
      
      
       
       make install

备注: 这里可能会发生因为缺少依赖包而产生的编译错误。这里遇到错误的会就自行google了。

1.1.2 淘宝 NPM 镜像

因为在墙的原因啊，国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。

第一步：安装
       
       
        
        1
       
       
       
       
        
        $ npm install -g cnpm --registry=https://registry.npm.taobao.org
       
       
第二步：使用

支持 npm 除了 publish 之外的所有命令, 如:
       
       
        
        1
       
       
       
       
        
        $ cnpm install [name]
       
       
1.2.1 vue-cli

介绍

vue-cli是官方的项目构建工具，一个简单的构建工具，通过几个默认的步骤帮助你快速的构建Vue.js项目。

第一步安装
        
        
         
         1
        
        
        
        
         
         npm install -g vue-cli
        
        
如果用npm下载速度慢，可以使用cnpm.

第二步选择模板

所有的官方项目模板在vuejs-templates。如果有新的模板添加进来，你需要使用下列命令，
        
        
         
         1
        
        
        
        
         
         vue init <template-name> <project-name>
        
        
也可以使用 vue list 来查看官方模板列表。

目前可用的模板包括：

browserify–全功能的Browserify + vueify，包括热加载，静态检测，单元测试
browserify-simple–一个简易的Browserify + vueify，以便于快速开始。
webpack–全功能的Webpack + vueify，包括热加载，静态检测，单元测试
webpack-simple–一个简易的Webpack + vueify，以便于快速开始。
simple - 单个HTML文件中最简单的Vue设置

1.3.1 第一个vue项目

第一步生成项目

我们的项目选择webpack,使用以下命令
        
        
         
         1
        
        
        
        
         
         vue init webpack vue-todos
        
        
前面就一直点回车就行了，后面使用ESLint,测试就选择no就行。

ESLint用来作为静态代码检查,避免低级错误和统一代码的风格。

pick a test runner 选择一个测试运行器

nightwatch 自动测试框架

第二步运行项目

输入下面的命令就可以运行这个项目了。
        
        
         
         1
        
        
        
        
         
         2
        
        
        
        
         
         3
        
        
        
        
         
         cd vue-todos
        
        
        
        
         
         npm install
        
        
        
        
         
         npm run dev
        
        
这是时候就会自动打开端口 http://localhost:8080/#/

你会看到这样的页面。那我们就成功了。