-->

WEB资讯

您的当前位置:首页 > 资讯 > WEB框架> vue

一个完整的vue本地环境安装实例

2018-09-11 23:28:33  来源:admin 点击:1525

win系统搭建一个完整的vue项目

0.安装git
这个下载一个就可以了,地址是https://git-scm.com/

1.png

2.png

1.安装node环境

node的下载之处,请直接到官网下载'https://nodejs.org/en/' 安装完node之后 使用node中的npm指令 在git中查看一下npm -v和node -v,看看版本 通过npm install npm -g进行npm的升级 安装npm的淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

3.png

3.安装webpack

npm install webpack -g

webpack安装.jpg

4.安装vue-cli脚手架工具

# 全局安装 vue-cli npm install --global vue-cli 安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。

微信图片_20180911231336.png

5.创建vue项目
vue init webpack zfxapp
$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "zfxapp".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev

b88cbfdb978937dafe1833292aaf2e2.png

444.jpg

6.安装依赖
cd myVueProject npm install 如果没按路由,安装 vue 路由模块 vue-router 和网络请求模块 vue-resource,输入:cnpm install vue-router vue-resource --save。
7.安装请求数据axios
Vue-resource已经过时,所以我们安装axios,cd到项目下  cnpm install axios
8.npm run dev运行项目

npm run dev运行项目

9.发布项目(跳过)
npm run bulid
10.localhost:8080
10.localhost:8080运行
11.配置路由

微信图片_20180911231108.png

微信图片_20180911231120.png


12.细节
npm install axios -g (全局安装)和 npm install axios (本地安装)
       其中参数-g的含义是代表安装到全局环境里面,即安装在Node安装目录下的node_modules文件夹中,
       一般在 \Users\用户名\AppData\Roaming\ 目录下,可以使用npm root -g查看全局安装目录。
       在js实例代码中,默认下node.js会在NODE_PATH和目前js所在项目下的node_modules文件夹下去寻找模块,
       因此,如果只是全局安装,不能直接通过require()的方式去引用模块,需要手动解决包路径的配置问题,
       当然你也可以复制全局安装的node_modules文件夹到项目下,
       还有办法可以选择将环境变量的NODE_PATH设置为C:\Program Files\nodejs。
       所以如果采用全局安装,如果项目转移的话会存在找不到包的情况。
因此,不推荐只全局安装(如果是工具插件可以全局安装,如果是项目需要的依赖则选本地安装)。
据node团队介绍,本地安装包对于项目的加载会更快。
npm install axios 和npm install axios -S (npm install axios --save的简写)
       参数-S代表的含义是在安装axios时会修改package.json,默认在dependencies中添加项目生产依赖。
       这样以后就不用一个个的用npm去安装了,直接执行npm install 会安装dependencies下所有的依赖。
npm install -S和 npm install axios -D (同npm install axios --save -dev)
		-D是package.json中的devDependencie中添加项目开发阶段的依赖。
		在node package有两种依赖,一种是dependencies一种是devDependencies,
		其中前者依赖的项该是正常运行该包时所需要的依赖项,而后者则是开发的时候需要的依赖项,
		像一些进行单元测试之类的包。这里只会在devDependencies中添加依赖
uninstall 和 update 的使用
uninnstall 和 update 用法基本同install 如卸载开发版本的模块
m uninstall gulp --save-dev
npm install xxxx --save 可以缩写为npm i -S
npm run start 可以缩写为 npm start

相关文章更多 >

© 2024版权所有 水水网

电话:171780793