使用vue2.0创建的项目的步骤方法

1.由于vue项目依赖 node.js npm 需要先安装.   若没有请先安装，请按照此文章进行安装https://www.jb51.net/article/138020.htm

//检查是否有node.js  npm vue

win+r   输入cmd  输入node -v  回车 会出现node,js的版本

输入npm -v  回车 会出现npm的版本

输入vue -V 回车 会出现vue的版本

2.安装vue：

npm install -g vue-cli  
//-g表示全局安装，vue-cli是模块，全局安装的模块可以在命令行直接使用  

由于npm网站在国内速度非常慢，所以可以在命令后面加上淘宝的镜像

即：npm install -g vue-cli --registry=https://registry.npm.taobao.org

之后，可以vue --V查看vue是否安装好，出现版本号即安装成功。

3.接下来是创建项目框架

如果想放到指定的目录下，先进入这个目录在执行创建项目的命令

例如：

e:回车   //进入E盘      cd test回车   //进入E盘的test文件夹

E:\test\vue init webpack my-vue    //创建一个基于"webpack"的项目，后面是项目名

依次按照提示输入，项目名、项目描述、项目作者等等，然后一路回车  看到最后这句项目就创建好了。

To get started:  就是告诉你接下来该做什么，依次完成下面3行命令就可以了。进入my-vue项目-----安装npm依赖-----运行项目

以下为此3步的详解

cd my-vue   在my-vue文件下看到项目结构：注：这是安装了依赖以后的截图，没安装依赖以前是没有node_modules文件夹的

4.安装项目依赖

生成了项目以后是不能直接运行的，现在很多项目都依赖许许多多的模块，需要逐一安装依赖。

ctrl+c 停掉刚生成项目的命令,cd my-vue 进入项目跟目录, 用命令npm install 安装

若安装缓慢同样可以使用淘宝镜像

即输入命令：npm install --registry=https://registry.npm.taobao.org

当这个命令运行完成以后会多出一个node_modules文件夹,里面就是项目所需的所有依赖

可以看到有很多模块,这些模块都是在package.json文件里定义好了的.

5.运行测试

npm run dev 

出现如下红色框框表示启动完成，一般流览器会自动跳转出界面http://localhost:8080/，也可以手动打开流览器器输 入地址。

浏览器界面截图：

这样项目就搭建完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli创建的项目,配置多页面的实现方法

    vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂 假设要新建的页面是rule,以下以rule为例 创建新的html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d

  • 使用vue-cli创建项目的图文教程(新手入门篇)

    本文是针对对于完全没有了解过vue 和npm,连运行环境和项目构建的都不会的小白,对于前端老司机的就不用看了,浪费时间. 使用npm 与vue-cli 构建vue 项目 第一步:安装运行环境(node与npm) nodeJ官网:http://nodejs.cn/下载安装包( 安装) 安装完成后,需要检测是否安装成功 使用命令行cmd 打开dos 黑窗口,运行 node -v 和 npm –v,出现版号说明安装成功 注(npm 是node自带的,在安装node时已经安装了) 如何升级npm 的版本

  • 解决vue-cli创建项目的loader问题

    在使用vue-cli项目创建项目中,使用sass等预编译css语言时,不需要在config中配置,只需要在项目中安装相应loader即可. 例如: 1.在项目中使用sass $ npm i node-sass -D $ npm i sass-loader -D 2.当使用vuex时,即使安装vux和vux-loader,在项目中使用了vux的组件,项目就无法启动,报错如下: These dependencies were not found: * !!vue-style-loader!css-l

  • 使用命令行工具npm新创建一个vue项目的方法

    Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程. 只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project $ vue init webpack test //输入命令 ? Project

  • 基于vue-cli创建的项目的目录结构及说明介绍

    一. ├── build // 项目构建(webpack)相关代码 记忆:(够贱) 9个 │ ├── build.js // 生产环境构建代码 │ ├── check-versions.js // 检查node&npm等版本 │ ├── dev-client.js // 热加载相关 │ ├── dev-server.js // 构建本地服务器 │ ├── utils.js // 构建配置公用工具 │ ├── vue-loader.conf.js // vue加载器 │ ├── webpack.b

  • Vue-cli创建项目从单页面到多页面的方法

    Vue-cli创建项目从单页面到多页面的方法

    对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm install glob --save-dev 2.修改build下的文件 (1)修改webpack.base.conf.js 添加以下代码: var glob = require('glob'): var entries = getEntry('./src/pages/**/*.js') 将module.exports中的 entry:

  • 在vue项目创建的后初始化首次使用stylus安装方法分享

    项目创建报错: This dependency was not found: * !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","s

  • Vue使用vue-cli创建项目

    Vue使用vue-cli创建项目

    本文介绍了Vue使用vue-cli创建项目,分享给大家,具体如下: vue-cli 是一个官方发布vueJS项目脚手架:https://github.com/vuejs/vue-cli 我创建的模板项目:https://github.com/Aleczhang1992/my-vue-project/tree/dev 一.步骤 1.要求已安装Node.js (>=4.x, 6.x preferred) and Git. 可以设置cnpm可以提升依赖包下载速度: npm install -g cnp

  • 使用vue2.0创建的项目的步骤方法

    1.由于vue项目依赖 node.js npm 需要先安装.   若没有请先安装,请按照此文章进行安装https://www.jb51.net/article/138020.htm //检查是否有node.js  npm vue win+r   输入cmd  输入node -v  回车 会出现node,js的版本 输入npm -v  回车 会出现npm的版本 输入vue -V 回车 会出现vue的版本 2.安装vue: npm install -g vue-cli   //-g表示全局安装,vu

  • 使用Vue-cli3.0创建的项目 如何发布npm包

    在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建index.js进行模块的导出 将我们需要导出的组件在index.js文件中进行统一导出,可能之前需要进行处理,是先进行全局注册Vue.component,还是用户自己注册. import App from './App.vue' export default App; 修改vue.config.js配置文件 修改publicPath的路径为相对路径 mod

  • 使用IDEA创建java项目的步骤详解（hello word）

    使用IDEA创建java项目的步骤详解（hello word）

    前提:已安装好jdk,配置好环境变量.我使用的是java 8 首先在自己的D盘下建一个文件夹,用来存放我们待会新建的项目,我创建了IdeaProject: 1,第一步打开idea 2,第二步选择创建java项目,并选择自己的jdk(我自己本地已经配置了所以有),没有可以点击new去自己的安装目录下找,一般默认安装C:\Program Files\Java,然后选择next 下一步 3,第三步将"Create project from template"前面的勾去掉,然后点击"

  • 亲手教你IDEA2020.3创建Javaweb项目的步骤详解

    亲手教你IDEA2020.3创建Javaweb项目的步骤详解

    IDEA2020.3激活码 最新idea2020激活码超详细教程(设置插件仓库成功激活到2099年) 关于最新IDEA2020.2.1,2.2,3以上破解,激活失效,重新激活的问题 创建Javaweb项目 第一步:在当前Project下创建一个Java的Module 第二步:右键当前模块选择Add Frameworks Support勾中Web Application 第三步:点击Edit Configurations,点击+号选择Tomcat Server的Local然后再选择Deployme

  • Vue cli3.0创建Vue项目的简单过程记录

    Vue cli3.0创建Vue项目的简单过程记录

    创建Vue项目 在要创建项目的文件夹下面打开Powershell窗口 输入命令 vue create 项目名称 选择第二项 回车后 选择是否使用历史路由 no 回车 选择 Less 回车 选择第三个 回车 选择第一个 回车 选择第一个 回车 是否保存模板 选择no 完成啦 完成 总结 到此这篇关于Vue cli3.0创建Vue项目的文章就介绍到这了,更多相关Vue cli3.0创建Vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • vue2.0安装style/css loader的方法

    项目需要引用额外的ui组件库,就需要安装style-loader和css-loader 安装style-loader  (css-loader默认有) npm install style-loader -D 然后,打开模板build--webpack.base.conf.js( 根据初始化模板不同也可能是 build 下面的webpack.base.conf.js ),新增一个json,注意style!css顺序不能颠倒(!表示连接) 补充: 2.0 以后应该写成 style-loader!cs

  • 解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题

    我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传. 项目中用的element-ui是V1.4.3 <el-upload class="upload-demo" drag ref="fileUpload" :action="urls.fileUpload" :on-success="handleUploadSuccess" :on-error=

  • 详解pycharm的newproject左侧没有出现项目选项的情况下创建Django项目的解决方法/社区版pycharm创建django项目的方法

    首先,我当时出现的问题是newproject创建的时候没有django的选项,查了半天发现我安装的pycharm是社区版本.所以需要用终端命令行的方式创建django项目. 首先,随便打开一个项目,然后在pycharm界面的左下角有Terminal终端的图标,点开. cd返回根目录 在终端输入你PycharmProjects的目录,由于我是mac 端,我输入的是:cd /Users/apple/PycharmProjects 进入目录后,输入:django-admin startproject

  • Idea2020.2创建JavaWeb项目(部署Tomcat)方法详解

    Idea2020.2创建JavaWeb的方式略有改动,以下做个记录 1.创建项目不再是Java Enterprise了,而是先New 一个普通Java项目 2.创建项目后,选择Run->Edit Configuration->左上角加号->Tomcat Server(注意不是TomEE)->Local 3.点击Application右边的Configure,找到你放置的Tomcat的目录,点击OK 4.选择你运行项目调试项目的浏览器,我的电脑安装的是New Edge,你可以自行选择

  • Vue2.0如何发布项目实战

    Vue2.0如何发布项目实战

    大家好,这节我们主要讲解项目的发布,其实很简单,没有大家想的那么复杂,具体如下操作. 一.创建VUE项目 首先我们需要创建VUE项目,创建项目的代码如下: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev 项目截图如下: 项目截图 二.项目打

随机推荐