vue.js安装过程(npm安装)

悠悠 2022-05-24 05:29 239阅读 0赞

######     ######

一、开发环境

vue推荐开发环境:

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

npm: Nodejs下的包管理器。

webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板

二、环境搭建

安装node.js：   
1. 从node.js官网下载并安装node，安装过程很简单。   
2. npm 版本需要大于 3.0，如果低于此版本需要升级它：

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

3.基于node.js,利用淘宝npm镜像安装相关依赖。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像（[http://npm.taobao.org/][http_npm.taobao.org]）

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

*  1

完成之后，我们就可以用cnpm代替npm来安装依赖包了。

三、安装vue-cli脚手架构建工具

安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

$ cnpm install -g vue-cli
    # 回车，等待安装...
    $ vue
    # 回车，若出现vue信息说明表示成功

四、用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

五、安装依赖

在cmd里

1).输入：cd my-project（项目名），回车，进入到具体项目文件夹
    
    2).输入：cnpm install，回车，等待一小会儿

回到项目文件夹，会发现项目结构里，多了一个node\_modules文件夹（该文件里的内容就是之前安装的依赖）

六、测试环境是否搭建成功

方法1：在cmd里输入：npm run dev

方法2：在浏览里输入：localhost:8080(默认端口为8080)

文章来源：https://blog.csdn.net/haoaiqian/article/details/72453286

[http_npm.taobao.org]: http://npm.taobao.org/