精华内容
下载资源
问答
  • 2022-04-03 12:57:09

    1 输入命令 npm install -g cnpm --registry=https://registry.npm.taobao.org

    安装淘宝镜像

    2输入 cnpm install cnpm -g升级npm命令

     3 安装 vue 输入命令cnpm install vue

    4安装cnpm install --global vue-cli 

    环境安装完成 

    5 vue init webpack "项目名称"

    如果遇到一下问题

    无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,

     

    管理员身份运行PowerShell(命令提示符,来源于Linux的命令提示符也叫Shell)

     执行:set-ExecutionPolicy RemoteSigned

    6 vue init webpack "项目名称"

    输完后一直按回车

     等待项目搭建完毕

    输入 cnpm install

        cnpm run dev

    项目编译完毕后

    打开浏览器输入

    localhost:8080就可以看到项目页面
     

    更多相关内容
  • 笔记:Vue脚手架搭建项目

    千次阅读 2021-06-09 18:30:58
    今天下午主要学习了:下载node.js,配置淘宝镜像,安装vue脚手架 一、下载node.js 直接去百度搜索node.js,去到node.js的官网下载! 接下来的步骤网上教程很多,可供参考! 为什么要下载node.js呢?因为我们需要...

    把今天下午学到的知识做个笔记,以防忘记!

    今天下午主要学习了:下载node.js,配置淘宝镜像,安装vue脚手架

    一、下载node.js
    直接去百度搜索node.js,去到node.js的官网下载!
    在这里插入图片描述
    接下来的步骤网上教程很多,可供参考!
    为什么要下载node.js呢?因为我们需要用到npm去下载vue脚手架!(npm的应用基于node.js)

    npm是什么?
    在这里插入图片描述

    二、淘宝镜像、安装Vue脚手架
    配置镜像站,用来提高下载速度

    1、首先在键盘上按win+R,输入cmd,打开命令窗口

    2、在命令窗口输入该行命令,等待
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    3、完成后,输入以下指令下载vue脚手架
    cnpm install -g @vue/cli

    在安装淘宝镜像或者下载Vue脚手架的过程中会出现很多问题,你也可能没有出现问题。

    具体问题我忘记了,但是可以参考以下几点:
    node_modules下面需要有两个文件夹,以及环境配置
    在这里插入图片描述
    在这里插入图片描述
    环境配置:
    右击此电脑,选择属性
    在这里插入图片描述
    在这里插入图片描述
    我出现的问题就是通过这些方法解决的!

    三、安装好了之后我们就可以开始搭建项目了

    随便你在哪个盘里,然后我们建一个文件夹,尽量用英文命名。
    在这里插入图片描述
    在这里插入图片描述
    选中这上面,输入cmd

    在这里插入图片描述
    从这里开始,我们就可以开始创建项目了!

    1、vue create 项目名称 ,项目名称我这里取demo1,等待一会即可
    在这里插入图片描述

    2、按上下键,选择最后一个在这里插入图片描述
    Manually select features --手动配置

    3、这里我们通过上下键和空格键来选择
    在这里插入图片描述
    ( ) Linter / Formatter 记得一定要取消掉,否则写代码会出现很多提示错误

    4、选中第一个点击确定
    在这里插入图片描述
    5、选择2.x版本的
    在这里插入图片描述

    6、输入y
    在这里插入图片描述
    在这里插入图片描述
    Use history mode for router 是不是用history模式来创建路由** 选择y

    7、选择第一个
    在这里插入图片描述
    In dedicated config files --这是问你是否保存刚才的配置,选择第一个即可

    8、输入n,然后等待

    N 问你是否保存预设作为以后的项目使用,作用:再创建项目时,直接找这个预设即可
    在这里插入图片描述
    在这里插入图片描述
    9、输入这两行命令
    在这里插入图片描述

    在这里插入图片描述
    10、复制第一条地址,在浏览器打开
    在这里插入图片描述
    在这里插入图片描述

    11、这时我们文件夹下就有demo1了
    在这里插入图片描述

    四、我们用vscode打开demo1
    在这里插入图片描述
    在这里插入图片描述
    修改home里面的代码:
    原始的:
    在这里插入图片描述
    修改后:
    在这里插入图片描述
    打开终端,输入命令:
    在这里插入图片描述
    在这里插入图片描述
    复制第一个地址,在浏览器中打开

    在这里插入图片描述
    这时我们会发现,我们之前在Home里面删除的代码就没有了!

    五、vs创建webapi项目,步骤略

    需要在配置文件中添加以下配置,防止跨域问题的出现
    在这里插入图片描述
    运行项目
    在这里插入图片描述

    在地址栏输入http://localhost:53078/api/Students到api中的Students控制器中

    到Postman中输入该地址,
    在这里插入图片描述
    然后数据就能显示出来
    在这里插入图片描述
    六、
    我们再回到VSCode中,
    首先我们需要通过命令下载axios:npm install axios -s
    然后在main.js中写这两行代码,import是导入,第二行是使用
    在这里插入图片描述
    然后我们下载vetur

    七、我们就可以直接在Home.vue中开始写我们需要的代码了

    <template>
      <div class="home">
        <table>
          <thead>
            <tr>
              <th>姓名</th>
              <th>密码</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in StudentList" :key="item.StuID">
              <td>{{item.StuLoginName}}</td>
              <td>{{item.StuLoginPwd}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    
    <script>
    export default {
      name: "Home",
      data() {
        return {
          StudentList: [],
        };
      },
      created(){
        this.GetAllStudent();
      },
      methods: {
        GetAllStudent() {
          var vm = this;
          vm.$axios.get("http://localhost:53078/api/Students").then((res) => {
            console.log(res);
            vm.StudentList = res.data;
          });
        },
      },
    };
    </script>
    
    
    
    

    接着我们在终端输入 npm run serve
    然后复制地址到浏览器,我们就可以看到效果了!
    在这里插入图片描述

    vue -V 查看版本

    展开全文
  • 主要介绍了vue脚手架搭建项目的兼容性配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 2.通过vue脚手架创建项目,创建项目有两种的方式,这里介绍的是使用图形化界面来创建,命令是vue ui。 在项目文件中打开cmd命令框,输入vue ui命令,点击回车,等待执行完毕,自动打开视图界面,如下: 填写项目...

    1.脚手架安装

    在cmd中全局安装vue脚手架,输入npm i @vue/cli -g

     

     安装脚手架完毕

    2.通过vue脚手架创建项目,创建项目有两种的方式,这里介绍的是使用图形化界面来创建,命令是vue ui。

    在项目文件中打开cmd命令框,输入vue ui命令,点击回车,等待执行完毕,自动打开视图界面,如下:

    填写项目名字,这里不支持中文,注意一下,然后下一步

    选择手动配置,进行下一步,

     

    创建项目时,以下四个功能一般需要选择

    • Babel
    • Router
    • Linter/Formatter   (这个东西叫做语法规范,虽然用起来很恶心,但建议一定要使用,可以规范我们的代码格式,让我们写出来漂亮的代码)
    • 使用配置文件

    vuex功能按照自身需求决定是否需要添加
    点击下一步        

     

     

    Pick a linter/formatter config选择标准配置ESLint + Standard config,点击创建项目

    是否需要保留预设这个看你自己,需要的话给预设命名,保留,下一次直接使用即可

     

    然后我们的vue项目就创建完成了,

    在VScode中查看目录文件:

     

    启动项目,就使用命令npm run serve就好了,

    好啦,项目创建款已经完成了,小伙伴们快去启动自己的项目吧 

     

     

    展开全文
  • 二、安装vue-cli,创建项目 1、终端输入npm install vue-cli -g 2、输入vue -V,查看版本 3、在终端打开一个文件夹,也就是存放vue-cli项目的地方,输入vue init webpack 项目文件夹名称,下图是初始化。...

    目录

    一、安装node.js

    二、安装vue-cli,创建项目

    三、报错解决


    一、安装node.js

    1、node.js官网下载地址:https://nodejs.org/zh-cn/

    双击下载安装包

    点击继续即可
    2、打开终端(顺便唠一句command+空格,输入ter,点击打开终端),输入node -V,查看版本、有版本号就是安装成功。 

    3、node.js集成npm包管理器,npm -v查看版本

    这边因为我之前已安装,没有重新安装刚才截图的包。

     二、安装vue-cli,创建项目

    1、终端输入npm install vue-cli -g
    2、输入vue -V,查看版本

     3、在终端打开一个文件夹,也就是存放vue-cli项目的地方,输入vue init webpack 项目文件夹名称,下图是初始化。

    等待下载完成即可。


    当初刚开始搭建时候,遇到很多坑,最后解决了没有记录下了,现在回头也想不起来,后续想起来,再分享一下。

    三、报错解决

    分享一个报错解决方式,忘记是项目初始化还是npm安装插件时候出现的。

     这是由于.npm文件没有sudo权限
    解决方案:
    1、打开终端:进入/Users/zhangzy目录,输入ls -al ~/ grep .npm
    2、查看.npm权限

    3、输入sudo chown -R zhangzy /Users/zhangzy/.npm 获取权限

    问题解决,这样就可以愉快的继续开发了。

    展开全文
  • vue脚手架搭建 1.Vue.js是一套构建用户界面的渐进式框架。 2.Vue 只关注视图层,采用自底向上增量开发的设计。 3.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 前言 Vue CLI 是一个...
  • 使用vue脚手架搭建项目详解

    千次阅读 多人点赞 2020-02-24 09:44:12
    安装vue脚手架 这里的版本是vue cli4 cnpm i @vue/cli -g 启动vue脚手架图形化界面 打开命令行,输入以下命令 vue ui 通过vue脚手架图形化界面创建项目 选择项目目录 ...
  • 使用vue脚手架搭建项目 Vue项目开发实战系列 主要内容: 初识vues 升级到vue cli4.0 从零开始配置vue cli4.0 使用vue cli4.0创建项目 1 初识vue 1.1 Vue概述 我们就直接开门见山,看看Vue的官网吧: Vue官网: ...
  • Vue脚手架搭建以及创建Vue项目流程

    千次阅读 2022-04-25 22:20:41
    Vue脚手架的创建以及用脚手架创建项目的全套流程
  • vue脚手架搭建项目

    2022-04-21 15:03:14
    1、搭建好vue环境之后安装 vue脚手架 npm/cnpm install vue-cli -g /npm install @vue/cli -g安装完成后。vue -V查看是否安装成功,出现vue版本则安装成功 2、安装webpack (Webpack:是一个开源的前端打包工具。...
  • vue脚手架搭建项目

    2019-12-14 10:33:14
    vue脚手架搭建项目 1,npm install @vue/cli -g------全局安装 2,vue -V-------------------查看vue的脚手架工具版本 随便新建一个文件夹 3,cd 文件夹路径-----------切换到这个文件夹 4,vue create 项目名 -----...
  • 使用VUE脚手架搭建VUE项目

    千次阅读 2021-08-05 21:18:35
    会显示脚手架vue-cli的版本@vue/cli xxx 4、创建项目vue create name---在之前创建的目录中创建 选择default-----按回车键 5、启动项目: 1)进入当前文件目录 2)npm run serve 3)在浏览器输入:...
  • 文章目录一、脚手架搭建项目1、全局安装@vue/cli(仅第一次执行)2、创建项目3、进入项目4、运行项目二、vue-router 路由创建1)路由安装2)创建router配置文件4)在vue项目中使用vue-router 在App.vue文件中5)解决...
  • Vue脚手架 Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具,cli是(command-line-interface )命令行界面。 补充:单页面应用程序 单页面应用程序简称SPA,指一个Web网站中只有...
  • 1.首先得下载node.js。方法可自行百度。...以上所述是小编给大家介绍的vue脚手架(vue-cli)搭建项目详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对
  • Vue 脚手架(vue-cli) 的环境搭建 关于Vue 脚手架(vue-cli) vue 脚手架指的是 vue-cli 它是 vue 官方提供的一个快速构建单页面(SPA)环境配置的工具,cli 就是(command-line-interface ) 命令行界面。 vue 脚手架...
  • Vue项目脚手架搭建

    2021-12-16 22:24:35
    这里写自定义目录标题Vue 项目脚手架搭建需要的东西安装NodeJs功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中...
  • 突然热血来潮,实操了一把vue脚手架搭建全新vue项目,现将详细步骤贴出 一.node环境安装。 用vue-cli构建的项目是以node.js为基础的,可以理解为node.js是vue项目再构建时需要用到的环境。无论是本地serve还是打包...
  • Vue3 脚手架搭建项目详细过程

    千次阅读 2021-12-04 18:57:10
    二,项目搭建过程 由于 git bash 来执行命令的时候无法使用键盘上下键来进行选项选择,所以我们要使用 cmd / powershell,这里使用 powershell 1.vue create + 项目名称 2.模板选择,通过键盘上下键来选择,我们...
  • 五分钟掌握用Vue脚手架搭建一个完整项目

    万次阅读 多人点赞 2021-10-12 10:22:14
    1.在搭建项目之前,先安装淘宝镜像和命令行工具,可能需要等待一段时间(安装过一遍之后,再次建项目时就不需要再安装): a.Win+R打开命令提示行cmd b.进入命令行cmd,设置淘宝镜像; npm config set ...
  • vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。 创建项目步骤如下: 1、安装Vue CLI脚手架 指令:cnpm i -g @...
  • 前言 这几年一直在it行业里摸爬滚打,一路走来,不少总结了一些python行业里的高频面试,看到大部分初入行的新鲜血液,还在为各样的面试题答案或收录有各种困难问题 于是乎,我自己开发了一款面试宝典,...vue脚手架
  • (2)全局安装vue脚手架:npm install -g vue-cli 或者指定版本:npm i vue-cli@5.0.4 -g; (3)安装以后,输入:vue -V 出现相应的版本号,则表示安装成功; (4)卸载脚手架:npm uninstall -g vue-cli; (1)...
  • vue脚手架创建项目

    2022-04-02 10:58:17
    1. 安装NodeJS 2.使用npm 安装vue和@vue/cli 安装成功后,在命令行使用vue -V查看是否安装成功。 3. 使用命令vue init webpack “工程名”,初始化一个vue工程。
  • VUE 脚手架项目搭建

    2020-12-29 10:57:37
    1. 概述1.1 说明vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目。GitHub地址是:https://github.com/vuejs/vue-cli。2. 搭建2.1 node环境首先需要安装node环境,可以直接到中文官网...
  • 第一步:配置 npm 淘宝镜像 ...第二步:全局安装@vue/cli 打开命令行窗口执行 npm install -g @vue/cli 出现此界面表示安装完成 ps:如果不能执行,请尝试管理员模式打开命令行窗口 关闭dos窗口,再次打开...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,326
精华内容 7,730
关键字:

vue脚手架搭建项目