zoukankan      html  css  js  c++  java
  • 使用vue-cli创建项目(包含npm和cnpm的安装nodejs的安装)

    转:http://www.cnblogs.com/wisewrong/p/6255817.html

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli

    一、 安装 node.js

    或者这种或者nvm那种
    wget
    https://nodejs.org/dist/v10.15.0/node-v10.15.0-linux-x64.tar.xz tar xf node-v10.9.0-linux-x64.tar.xz ln -s /usr/software/nodejs/bin/npm /usr/local/bin/ ln -s /usr/software/nodejs/bin/node /usr/local/bin/
    查看全局安装路径
    npm confing ls -l
    prefix的配置
    如果全局安装之后不能用,要配置path
    sudo vim /etc/profile
    export PATH=$PATH:/root/xxxx/node-10.15.0/bin

    首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。

    只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csdn.net/s8460049/article/details/52396399

    安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

    二、安装 vue-cli

    安装好了 node,我们可以直接全局安装 vue-cli:

    npm install -g vue-cli

    但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置 cnpm:

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

    如果安装失败,可以使用 npm cache clean 清理缓存,如果报错,后面加--force强制执行,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存

    同样可以使用 cnpm -v 查看是否安装成功

    然后使用 cnpm 安装 vue-cli 和 webpack

    cnpm install -g vue-cli
    

    最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack

    安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

    如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本

    三、生成项目

    首先需要在命令行中进入到项目目录,然后输入:

    vue init webpack Vue-Project

    其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates

    Vue-Project 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹

    配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

    然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

    cnpm install

    然后启动项目

    npm run dev

    如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js

     

    建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

    四、打包上线

    自己的项目文件都需要放到 src 文件夹下

    项目开发完成之后,可以输入 npm run build 来进行打包工作

    npm run build

    打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

    项目上线时,只需要将 dist 文件夹放到服务器就行了。

  • 相关阅读:
    leetcode 18 4Sum
    leetcode 71 Simplify Path
    leetcode 10 Regular Expression Matching
    leetcode 30 Substring with Concatenation of All Words
    leetcode 355 Design Twitte
    leetcode LRU Cache
    leetcode 3Sum
    leetcode Letter Combinations of a Phone Number
    leetcode Remove Nth Node From End of List
    leetcode Valid Parentheses
  • 原文地址:https://www.cnblogs.com/zipon/p/7494601.html
Copyright © 2011-2022 走看看