快速搭建vue项目

1、Windows 安装包(.msi) node安装

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

2.检查node版本 : node --version

3.开始搭建vue工程

1.可以安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org 这样你以后再通过终端安装包就直接用cnpm 代替 npm,这样的好处是下载的包会比较快,因为淘宝镜像的服务器在国内 杭州,npm的服务器在国外,所以这边由于距离原因导致路由响应的一个距离延迟。

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

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

4.保证环境里有webpack:

全局安装:npm install -g webpack

开发环境安装: npm install --save-dev webpack

5.# 全局安装 vue-cli 脚手架工具    

npm install -global vue-cli

# 创建一个基于 webpack 模板的新项目

vue init webpack my-project

6. 安装依赖    

cd my-project

npm install

npm run dev 运行vue

7.运行后出现下图就显示已经运行成功了

8.我们可以通过浏览器打开 http://localhost:8080就可以看到项目了

注:因为vue项目监听的是8080端口,请确保本机8080端口没被禁用

这里需要手动在浏览器打网址,解决这个问题让vue项目直接npm run dev之后自动在浏览器打开仅需要打开vue工程,将config -> index.js ->dev 对象中的 autoOpenBrowser属性设置为true就行,如图:

7.拓展安装

npm i vue-resource --save

npm i axios --save

7.   # 在 src 目录下创建 views 文件夹,用于管理各组件

# main.js 为入口文件,全局导入(import from)和注册(Vue.component)以及使用(Vue.use)写在这里,也可以在Vue的原型上扩展方法(Vue.prototype.axios = axios)

# 在 router 文件下配置路由

# 在 components 文件下写公用组件

原文地址:https://www.cnblogs.com/lynna/p/11888226.html

时间: 2024-07-29 19:41:11

快速搭建vue项目的相关文章

利用vue-cli3快速搭建vue项目详细过程

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

使用webpack搭建vue项目

有一句话叫"前人栽树后人乘凉",还有一句话叫"如果说我看得比别人更远些,那是因为我站在巨人的肩膀上".前一句是国人的俗语,后一句是那个发现了"万有引力"定律的牛顿说的.为什么要引用这两句呢?是因为我刚开始用vue的时候,使用的是vue-cli来搭建vue项目,快速又好用:我刚开始用react的时候,使用的是create-react-app来搭建react项目,方便又省事.使用这些已有的脚手架来搭建项目,无可厚非,对于新手来说,也确实能快速构建,不

Vue CLI 3.x搭建Vue项目

一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若显示版本号,则说明安装成功. 2. Git(命令行终端) Git官网下载安装即可. Linux apt-get install nodejs node -v apt-get install npm npm -v npm命令1.得到原本的镜像地址 npm get registry 2.设置成淘宝 npm c

vs code 搭建vue项目 参考文章

1 https://www.cnblogs.com/zyskr/p/10609288.html 在vscode上搭建一个vue项目---初学总结. 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安装命令: npm install -g vue-cli 打开VScode的终端,调出命令输入框.点击终端-新建终端,输入上述命令,回车,等待安装完成. 3.安装webpack,它是打包js的工具 安装命令: npm ins

无Maven不项目---使用Eclipse快速搭建Maven项目

自从了解Maven和会使用Maven之后,无论创建什么类型的工程,java,web我都会使用Maven来管理项目,就是因为它提供的依赖功能,说白了就是你想用到什么包就去Maven仓库搜索,并将坐标粘贴在pom.xml中,保存一下, Eclipse就会自动为你下载相关的包,省了导出找jar包的时间,和版本冲突的问题!下面使用Eclipse快速搭建Maven项目 如果你的Eclipse自带Maven那么恭喜你,不用配置了,如果没有的话使用eclipse安装插件的办法,地址:http://m2ecli

用vue-cli来搭建vue项目和webpack

vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo } span.s1 { } sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-simple projectName 第三步:把文件切换到初始化的项目中 cd projectName 第四步:安装依赖 npm install 当然也可以用

Spring Boot入门-快速搭建web项目

Spring Boot 概述: Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can "just run".We take an opinionated view of the Spring platform and third-party libraries so you can get started with minimum

基于requireJS和Gulp可快速搭建前端项目的脚手架

基于requireJS和Gulp可快速搭建前端项目的脚手架. 项目地址 git clone git@github.com:perfectSymphony/Gulp-cli.git 项目目录 ├── README.md # 项目说明 |—— bin # (在gulpfile文件中使用到)解析layout中的模板html,将完整的html产出到src/html中 ├── dist # 打包生成的项目文件 |—— logs # 监听编译less文件时,打印报错信息, ├── gulpfile.js #

vue-cli搭建vue项目

vue-cli搭建vue项目: 进入要搭建的文件目录下输入命令开始安装 , 网速好,可以用npm 网速差的用淘宝镜像cnpm; -g是全局安装 D:\vuedemo cnpm install vue-cli -g 出现以下界面 可以进行下一步 2.查看是否安装成功命令 vue -V 注:后面的V 是大写的 ,会出现版本号说明安装成功 D:\vuedemo vue -V 3.初始化 (此处是基于webpack的) D:\vuedemo vue init webpack projectdemo ?