vuejs如何安装依赖-成都快上网建站

vuejs如何安装依赖

这篇文章主要为大家展示了“vuejs如何安装依赖”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vuejs如何安装依赖”这篇文章吧。

创新互联"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销,产品发布一步更新,电脑网络+移动网络一网打尽,满足企业的营销需求!创新互联具备承接各种类型的做网站、网站建设项目的能力。经过10年的努力的开拓,为不同行业的企事业单位提供了优质的服务,并获得了客户的一致好评。

vuejs安装依赖的方法:1、安装node和cnpm;2、安装vue-cli脚手架构建工具;3、用vue-cli构建项目;4、打开cmd命令窗口,使用cd命令进入到具体项目文件夹中;5、执行“cnpm install”命令即可安装依赖。

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

一、开发环境

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/)

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

完成之后,我们就可以用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 
? 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)

以上是“vuejs如何安装依赖”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前名称:vuejs如何安装依赖
文章URL:http://kswjz.com/article/jiohse.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流