• VUE学习(一)——使用npm安装项目


    npm是node.js自带的功能

    Node.js 安装配置

    本章节我们将向大家介绍在 Windows 和 Linux 上安装 Node.js 的方法。

    本安装教程以 Node.js v4.4.3 LTS(长期支持版本)版本为例。

    Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/

    nodejs_download

    你可以根据不同平台系统选择你需要的 Node.js 安装包。

    Node.js 历史版本下载地址:https://nodejs.org/dist/

    注意:Linux 上安装 Node.js 需要安装 Python 2.6 或 2.7 ,不建议安装 Python 3.0 以上版本。


    Windows 上安装 Node.js

    你可以采用以下两种方式来安装。

    1、Windows 安装包(.msi)

    32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

    64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

    本文实例以 v0.10.26 版本为例,其他版本类似, 安装步骤:

    步骤 1 : 双击下载后的安装包 v0.10.26,如下所示:

    install-node-msi-version-on-windows-step1

    步骤 2 : 点击以上的Run(运行),将出现如下界面:

    install-node-msi-version-on-windows-step2

    步骤 3 : 勾选接受协议选项,点击 next(下一步) 按钮 :

    install-node-msi-version-on-windows-step3

    步骤 4 : Node.js默认安装目录为 "C:Program Files odejs" , 你可以修改目录,并点击 next(下一步):

    install-node-msi-version-on-windows-step4

    步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next(下一步)

    install-node-msi-version-on-windows-step5

    步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):

    install-node-msi-version-on-windows-step6

    安装过程:

    install-node-msi-version-on-windows-step7

    点击 Finish(完成)按钮退出安装向导。

    install-node-msi-version-on-windows-step8

    检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path",输出如下结果:

    PATH=C:oraclexeapporacleproduct10.2.0serverin;C:Windowssystem32;
    C:Windows;C:WindowsSystem32Wbem;C:WindowsSystem32WindowsPowerShellv1.0;
    c:python32python;C:MinGWin;C:Program FilesGTK2-Runtimelib;
    C:Program FilesMySQLMySQL Server 5.5in;C:Program Files
    odejs;
    C:Users
    gAppDataRoaming
    pm

    我们可以看到环境变量中已经包含了C:Program Files odejs

    检查Node.js版本

    node-version-test

    2、Windows 二进制文件 (.exe)安装

    32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/node.exe

    64 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/x64/node.exe

    安装步骤

    步骤 1 : 双击下载的安装包 Node.exe ,将出现如下界面 :

    install-node-exe-on-windows-step1

    点击 Run(运行)按钮将出现命令行窗口:

    install-node-exe-on-windows-step21

    版本测试

    进入 node.exe 所在的目录,如下所示:

    node-version

    如果你获得以上输出结果,说明你已经成功安装了Node.js。

    NPM 使用介绍

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

    • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
    • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
    • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

    由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功:

    $ npm -v
    2.3.0

    使用淘宝 NPM 镜像

    大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。

    淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

    你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org

    这样就可以使用 cnpm 命令来安装模块了:

    $ cnpm install [name]

     使用NPM 方法来安装VUE项目

    由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像

    npm 版本需要大于 3.0,如果低于此版本需要升级它:

    # 查看版本
    $ npm -v
    2.3.0
    
    #升级 npm
    cnpm install npm -g
    
    
    # 升级或安装 cnpm
    npm install cnpm -g

    在用 Vue.js 构建大型应用时推荐使用 NPM 安装:

    # 最新稳定版
    $ cnpm install vue

    命令行工具

    Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。

    # 全局安装 vue-cli
    $ cnpm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
    # 这里需要进行一些配置,默认回车即可
    This will install Vue 2.x version of the template.
    
    For Vue 1.x use: vue init webpack#1.0 my-project
    
    ? Project name my-project
    ? Project description A Vue.js project
    ? Author runoob <test@runoob.com>
    ? Vue build standalone
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Setup unit tests with Karma + Mocha? Yes
    ? Setup e2e tests with Nightwatch? Yes
    
       vue-cli · Generated "my-project".
    
       To get started:
       
         cd my-project
         npm install
         npm run dev
       
       Documentation can be found at https://vuejs-templates.github.io/webpack

    进入项目,安装并运行:

    $ cd my-project
    $ cnpm install
    $ cnpm run dev
     DONE  Compiled successfully in 4388ms
    
    > Listening at http://localhost:8080

    成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

    注意:Vue.js 不支持 IE8 及其以下 IE 版本。



    以下转自https://www.cnblogs.com/happybread/p/8117442.html

    简介:

    Vue.js是前端一个比较火的MVVM框架, 是一套构建用户界面的渐进式框架。

    Vue 只关注视图层, 采用自底向上增量开发的设计。

    Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

    安装方式:

    第一种:使用npm,比较适合比较大型的应用,由于npm是国外的,使用起来比较慢;

    第二种:使用淘宝的cnpm镜像来安装vue;

    步骤:

    首先我们需要下载npm,安装好了node.js,就安装了npm。然后,再利用npm安装淘宝镜像的cnpm。

    1、打开cmd,输入命令  

          npm install -g cnpm --registry=https://registry.npm.taobao.org

         安装Vue需要npm的版本大于3,所以我们先升级一下npm,输入命令

         cnpm install cnpm -g

         安装vue,输入命令

         cnpm install vue

         安装vue-cli,输入命令

         cnpm install --global vue-cli

         

         这时,环境已经搭建好了。

    2、指定存放项目的路径,运行命令

         vue init webpack "项目名称"

         进入项目所在的目录,运行命令

         cd "项目所在文件夹

         然后依次执行下面的命令

         cnpm install

     

         cnpm run dev

        

       中间省略部分截图。。。。

        

        成功后我们进入浏览器,输入localhost:8080会展示下面的页面。

        

    项目目录:

    (1) build // 项目构建(webpack)相关代码 
      build.js // 生产环境构建代码
      check-versions.js // 检查node&npm等版本
      dev-client.js // 热加载相关
      dev-server.js // 构建本地服务器
      utils.js // 构建配置公用工具
      vue-loader.conf.js // vue加载器
      webpack.base.conf.js // webpack基础环境配置
      webpack.dev.conf.js // webpack开发环境配置
      webpack.prod.conf.js // webpack生产环境配置
    (2)config// 项目开发环境配置相关代码
      dev.env.js // 开发环境变量
      index.js //项目一些配置变量
      prod.env.js // 生产环境变量
    (3)node_modules// 项目依赖的模块
    (4)src// 源码目录
      assets// 资源目录  logo.png
      components// vue公共组件   Hello.vue
      router// 前端路由  index.js// 路由配置文件
      App.vue// 页面入口文件(根组件)
      main.js// 程序入口文件(入口js文件)
    (5)static// 静态文件,比如一些图片,json数据等
      .gitkeep
    (6)剩余
      .babelrc// ES6语法编译配置
      .editorconfig// 定义代码格式
      .gitignore// git上传需要忽略的文件格式
      index.html// 入口页面
      package.json// 项目基本信息
      README.md// 项目说明





  • 相关阅读:
    2020 CCF CSP-J2(表达式)
    PSP总结报告
    第十三周例行报告
    对团队成员公开感谢博客
    作业要求 20181127-1 附加作业 软件工程原则的应用实例分析
    第十二周例行报告
    第十一周例行报告
    第十周例行报告
    第八周例行报告
    第七周例行报告
  • 原文地址:https://www.cnblogs.com/zhilili/p/12256900.html
Copyright © 2020-2023  润新知