vue-cli的使用

已于 2023-04-19 10:06:26 修改
阅读量2.1k 收藏 7
点赞数 1
文章标签： vue.js
于 2021-01-15 14:50:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38345899/article/details/105160305
版权

vue-cli


Vue-cli(Command-Ling-Interface:命令行界面或者字符用户界面)家族
成员:cli2,cli3

环境搭建以及项目创建

Node.js环境安装

下载

网址: https://nodejs.org/zh-cn/
在这里插入图片描述在这里插入图片描述

安装

下载安装包到本地磁盘,运行安装包,进行安装.
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
可以自定义安装路径
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
至此,安装完成,可以打开命令行,输入命令node -v查看node.js安装版本.
我们发现此处该命令不可用,需要配置环境变量.

配置

配置系统环境变量:
编辑path变量,添加,node.js的安装路径.
Path:E:\software\software\node\installPath
在这里插入图片描述
在命令行中输入node -v,可以查看版本
在这里插入图片描述
输入npm -v,查看npm版本
在这里插入图片描述

Vue-cli安装

NPM

NPM介绍
NPM是随同NodeJS一起安装的包管理工具. 能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
新版的nodejs已经集成了npm，所以之前npm也一并安装好了。
NPM与CNPM的区别
在这里插入图片描述
NPM使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Install可以使用i代替,则npm install -g vue-cli
可以使用npm i -g vue-cli代替
命令: npm i -g –save --dev vue-cli:表示安装包信息加入到开发阶段的依赖.
可以缩写为npm i -g --d vue-cli

CNPM

在这里插入图片描述
安装完成CNPM
在这里插入图片描述

安装vue-cli

安装方式
在命令行中输入下载命令:npm install -g vue-cli
此种方式是从国外的网站下载,受各种因素影响,可能下载比较慢,可以使用淘宝镜像安装.
在这里插入图片描述
ctrl+c:终止安装
在这里插入图片描述
使用淘宝镜像安装:
在这里插入图片描述
通过如下图设置之后,可以使用
npm install -g vue-cli
来从淘宝镜像下载vue-cli
在这里插入图片描述

安装配置好CNPM之后,可以使用
cnpm install -g vue-cli
命令,在淘宝镜像安装

安装vue-cli
一般情况下使用cnpm install -gd vue-cli从淘宝镜像安装.
安装过程不需要手动干预,等待安装完成即可.
在这里插入图片描述
安装完之后,使用
vue -V命令来查看版本,检测是否安装成功.
在这里插入图片描述

创建vue-cli项目

创建命令:vue init webpack projectName
Webpack:创建项目的模板
projectName:创建vue-cli项目的项目名.
创建过程中的配置
下图所示的两个配置我们需要注意,其他的配置采取默认即可.
在这里插入图片描述
如果在执行vue init webpack projectName创建指令时失败,可以在此文件夹下重新运行安装vue-cli的语句.

创建过程参数说明:

Project name ：项目名称----不能有大写字母
Project description：项目描述
Author：作者
Vue build：如何构建项目
Install vue-router：是否安装路由
Use ESLint to lint your code：是否使用ESLint来规范我们的代码
Pick an ESLint preset：选择一个ESLint代码规范
Set up unit tests：是否需要自动化单元测试
Setup e2e tests with Nightwatch：是否需要自动化用户界面测试
Should we run ‘npm install’ for your after the project has been created?(recommend)：在后续安装依赖包是是否使用npm install安装
在这里插入图片描述
安装完成之后显示: Project initialization finished
在这里插入图片描述

接下来,根据提示,输入命令来启动项目
在这里插入图片描述
启动项目
在这里插入图片描述
项目启动成功之后显示:
在这里插入图片描述
我们在浏览器端输入
链接: http://localhost:8080
便可以访问vue-cli脚手架.
在这里插入图片描述
至此,我们已经成功在本地创建了一个vue-cli脚手架.

使用vue-cli开发

项目结构说明

脚手架结构如图所示:
在这里插入图片描述

项目主结构文件说明

在这里插入图片描述
build：项目webpack配置文件
config：针对开发环境和线上环境的配置文件
node_modules：项目依赖包
src：源代码目录
static：静态资源
.babelrc：JavaScript 语法的编译器
.editorconfig：针对babel的编译，浏览器配置
.eslintignore：针对babel的编译，eslint检测规则配置
.eslintrc.js：针对babel的编译，eslint检测规则配置
.gitignore：git 配置文件
.postcssrc.js：转换成css格式的插件
index.html：整个项目的入口index页，包含根实例的挂载点
package.json：定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
package-lock.json：其实package-lock就是锁定安装时的包版本号，需要上传到git上，以保证其他人在install时候，大家的依赖版本相同

node_modules

通过npm install安装的依赖代码库.

src目录文件

存放项目源码,开发的所有源码均放在此目录下
main.js:整个项目入口文件
el：#app
创建了一个vue的实例app让其挂载在index.html的id=app的节点上
components: { App }
注册局部组件APP，APP来源：import App from ‘./App’，即引入当前目录下的APP.vue组件
template: ‘’
定义模板为APP组件的内容,即main中创建vue实例展示的就是APP.vue组件中的内容
APP.vue：
单文件组件，包含三部分
第一部分：<template>模板部分
第二部分：<script>逻辑部分
第三部分：<style>样式部分
在这里插入图片描述

static文件目录

存放第三方静态资源.
.gitkeep
这是一个空文件,此文件的作用是:
即使创建的空文件,在将项目提交到getHub上时,也会被提交.

地址栏网址

在这里插入图片描述

去除地址栏”#”

在路由管理(index.js)中,进行如下图所示修改.
在这里插入图片描述

修改访问地址根目录

在这里插入图片描述
显示效果
在这里插入图片描述

组件安装与卸载

安装

以安装与卸载eslint组件为例.
打开命令行工具,切换到vue-cli项目目录下(可以看到vue-cli整个的项目结构).
在这里插入图片描述
生产环境
在这里插入图片描述
成功之后,在package.json文件中的指点位置出现eslint组件的依赖.
在这里插入图片描述

开发环境
在这里插入图片描述
在这里插入图片描述

卸载

生产环境
在这里插入图片描述
在这里插入图片描述
开发环境
在这里插入图片描述

如何导入vue-cli项目

Dos命令行

将vue-cli项目放到磁盘的某个目录下,在dos中切换到该目录下,输入如图所示的命令进行安装,待安装完成后便可以启动.
在这里插入图片描述
按照如下图所示的命令启动.
在这里插入图片描述

使用编辑软件

直接在编辑软件中导入.

使用Vue-cli—知识点

Router路由

Router实现页面跳转

实现有first页面跳转到A页面和B页面.
<router-link to="跳转路径">… </router-link>:表示路径跳转

创建first页面

<template>
  <div>
    <router-link to="/A">跳转到A页面</router-link>
    <router-link to="/B">跳转到B页面</router-link>
    <router-view></router-view>
    <br/>
  </div>
</template>
<script>
</script>

<style>
</style>

创建A页面

<template>
  <div>
    A页面...
    <br/>
     <router-link to="/">返回首页</router-link>
  </div>
</template>
<script>
</script>
<style>
</style>

创建B页面

<template>
  <div>
   b页面...
   <br/>
   <router-link to="/">返回</router-link>
  </div>
</template>
<script>
</script>

<style>
</style>

在路由管理页面添加路由
注意:
在添加路由时,首先要在路由管理界面引入该vue组件(页面)

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'
import A from '@/components/A'
import B from '@/components/B'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First
    },
    {
      path: '/A',
      name: 'A',
      component: A
    },
    {
      path: '/B',
      name: 'B',
      component: B
    }
  ]
})

Router实现父-子路由(组件之间存在父子关系)

此种路由管理方式,当从父页面跳转到子页面时,子页面会显示父页面和子页面的内容
在这里插入图片描述
添加A页面的子页面

<template>
  <div>
    A页面的子页面A1页面
    <br/>
    <router-link to="/A">返回上一级</router-link>
    <br/>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

<script>
</script>

<style>
</style>

修改A页面
<router-view></router-view>:表示将子页面挂载到此页面.如果在父页面中不添加这个标签,则无法实现跳转到子页面,即路由管理采用子路由方式无效.

<template>
  <div>
    A页面...
    <br/>
    <router-link to="/A1">A1页面</router-link>
    <br/>
     <router-link to="/">返回首页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
</script>

<style>
</style>

添加路由管理
在A页面的路由管理中添加跳转到子页面的路由.
删除掉A页面的标签

{
      path: '/A',
      name: 'A',
      component: A,
      children:[
        {
          path:'/A1',
          name:'A1',
          component:A1
        }
      ]
    },

Router实现平级路由(组件之间是平级关系)

两个组件之间的路由管理是平级关系,此种路由管理方式下,当从A组件到A1组件时,A1组件的页面不再显示A组件的内容.
修改路由管理
是A组件和A1组件的路由在路由管理中以平级关系呈现.
在这里插入图片描述
修改A页面
此种情况下,不再需要在A页面挂载A1页面

Router路由管理实现首页

即将所有页面路由管理以首页面路由的子路由的方式管理.
注意:
如果路由管理以父-子路由的方式进行管理,那么一定要在父组件中添加
<router-view></router-view>标签,否则路由无效.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'
import A from '@/components/A'
import B from '@/components/B'
import A1 from '@/components/A1'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First,
      children:[
        {
          path: '/A',
          name: 'A',
          component: A,
        },
        {
          path:'/A1',
          name:'A1',
          component:A1
        },
        {
          path: '/B',
          name: 'B',
          component: B
        }
      ]
    },
  ]
})

自定义组件与组件通信

自定义组件

Parent组件

<template>
  <div>
  </div>
</template>

<script>
  export default{
    name:'Parent',
    data(){
      return{

      }
    }
  }
</script>

<style>
</style>

Child组件

<template>
  <div>
  </div>
</template>

<script>
  export default{
    name:'Child',
    data(){
      return{

      }
    }
  }
</script>

<style>
</style>

添加路由

// 引入组件
import Parent from '@/components/StudyComponent/Parent'
import Child from '@/components/StudyComponent/Child'
// 添加路由
   {
      path:'/Parent',
      name:'Parent',
      component:Parent
    },
    {
      path:'/Child',
      name:'Child',
      component:Parent
    }

父组件与子组件通信

父组件中引用子组件
在这里插入图片描述
父组件中注册子组件
在这里插入图片描述
运用自定义标签传递数据
在这里插入图片描述
子组件中注册父组件传递的参数
在这里插入图片描述
子组件引用该参数
在这里插入图片描述

传递数据类型

父子组件之间传递的可以是基本类型,对象类型,数组.
具体代码如下:
父组件:

<template>
  <div>
    <child text="父子组件"></child>
    <!-- 传递纯数字-->
    <child :number="1"></child>
    <!-- 传递变量-->
    <child :message="msg"></child>
    <!-- 传递对象-->
    <child :obj="obj"></child>
    <!-- 传递数组-->
    <child :arr="arr"></child>
  </div>
</template>

<script>
  import Child from './Child'
  export default{
    name:'Parent',
    components:{
      Child
    },
    data(){
      return{
        msg:'中华人名共和国',
        obj:{
          name:'zcc',
          sex:'男',
          age:'22岁'
        },
        arr:[
         {
            name:'zcc',
            sex:'男',
            age:'22岁'
          },
         {
            name:'zcc',
            sex:'男',
            age:'22岁'
          },
          {
            name:'zcc',
            sex:'男',
            age:'22岁'
          },
        ]
      }
    }
  }
</script>

<style>
</style>

子组件

<template>
  <div>
    <p>{{text}}</p>
    <p>{{number}}{{number}}</p>
    <p>{{message}}</p>
    <!-- 遍历对象-->
    <ol>
      <li v-for="(keyName,value,index) of obj" :key=index>{{keyName}}:{{value}}</li>
    </ol>
    <ul>
      <li v-for="(item,index) of arr" :key=index>{{item.name}}----{{item.sex}}----{{item.age}}</li>
    </ul>
  </div>
</template>

<script>
  export default{
    name:'Child',
    props:['text','number','message','obj','arr'],
    data(){
      return{

      }
    }
  }
</script>

<style>
</style>

数据校验:

在这里插入图片描述

<template>
  <div>
    <div>
    </div>
    <div>
      <p>{{number}}{{number}}</p>
      <p>{{message}}</p>
      <!-- 遍历对象-->
      <ol>
        <li v-for="(keyName,value,index) of obj" :key=index>{{keyName}}:{{value}}</li>
      </ol>
      <ul>
        <li v-for="(item,index) of arr" :key=index>{{item.name}}----{{item.sex}}----{{item.age}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default{
    name:'Child',
    // props:['text','number','message','obj','arr'],
    props:{
      text:{
        type:String,
        // required:true,
        default:"默认值"
      },
      number:{
        type:Number,
        validator(val){
          return val>100
        }
      },
      message:{
        type:String
      },
      obj:{
        type:Object
      },
      arr:{
        type:Array
      },
    },
    data(){
      return{
        txt:this.text
      }
    }
  }
</script>

<style>
</style>

注意点:

==在传递纯数字时,属性参数应使用绑定方式.
在这里插入图片描述

动态传参时,属性也需要绑定方式
在父组件中不要重复使用子组件的标签,不然显示页面元素会重复

子组件与父组件通信

方式一
Parent.vue

<template>
  <div>
    <!-- 传递纯数字-->
    <!-- <child :number="111"></child> -->
    <!-- 传递变量-->
    <child
      :number="111"
      :message="msg"
      :obj="obj"
      :arr="arr"
      @on-callback="changeData"
      >
    </child>
    <!-- 传递对象-->
   <!-- <child :obj="obj"></child> -->
    <!-- 传递数组-->
    <!-- <child :arr="arr"></child> -->
  </div>
</template>

<script>
  import Child from './Child'
  export default{
    name:'Parent',
    components:{
      Child
    },
    data(){
      return{
        msg:'中华人名共和国',
        obj:{
          name:'zcc',
          sex:'男',
          age:'22岁'
        },
        arr:[
         {
            name:'zcc',
            sex:'男',
            age:'22岁'
          },
         {
            name:'zcc',
            sex:'男',
            age:'22岁'
          },
          {
            name:'zcc',
            sex:'男',
            age:'22岁'
          },
        ]
      }
    },
    methods:{
      changeData(val){
        this.msg=val
      }
    }
  }
</script>

<style>
</style>

Child.vue

<template>
  <div>
    <div>
      <input type="text" v-model="val"/>
      <input type="submit" @click="submit" value="提交" />
       <p>{{message}}</p>
    </div>
    <div>
      <p>{{number}}{{number}}</p>
    </div>
    <div>
      <div>
          <!-- 遍历对象-->
          <ol>
            <li v-for="(itemKey,item,index) of obj" :key="index">{{itemKey}}:{{item}}</li>
          </ol>
      </div>
      <div>
        <ul>
          <li v-for="(item,index) of arr" :key="index">{{item.name}}----{{item.sex}}----{{item.age}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    props:['text','number','message','obj','arr'],
   /* props: {
      text: {
        type: String,
        // required:true,
        // default:"默认值"
      },
      number: {
        type: Number,
        validator(val) {
          return val > 100
        }
      },
      message: {
        type: String
      },
      obj: {
        type: Object
      },
      arr: {
        type: Array
      },
    }, */
    data() {
      return {
        txt: this.text,
        val:this.message
      }
    },
    methods:{
        submit(){
          this.$emit('on-callback',this.val)
        }
    }
  }
</script>

<style>
</style>

方式二
Child.vue

<template>
  <div>
    <div>
      <input type="text" v-model="val"/>
      <input type="submit" @click="submit" value="提交" />
    </div>
    <div>
      <p>{{number}}{{number}}</p>
    </div>
    <div>
      <div>
          <!-- 遍历对象-->
          <ol>
            <li v-for="(itemKey,item,index) of obj" :key="index">{{itemKey}}:{{item}}</li>
          </ol>
      </div>
      <div>
        <ul>
          <li v-for="(item,index) of arr" :key="index">{{item.name}}----{{item.sex}}----{{item.age}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    // props:['text','number','message','obj','arr'],
   props: {
      text: {
        type: String,
        // required:true,
        // default:"默认值"
      },
      number: {
        type: Number,
        validator(val) {
          return val > 100
        }
      },
      message: {
        type: String
      },
      obj: {
        type: Object
      },
      arr: {
        type: Array
      },
      info:{
        type:String
      }
    },
    model:{
      prop:'info',
      event:'on-callback'
    },
    data() {
      return {
        txt: this.text,
        val:this.info
      }
    },
    methods:{
        submit(){
          this.$emit('on-callback',this.val)
        }
    }
  }
</script>

<style>
</style>

Parent.vue

<template>
  <div>
    <!-- 传递纯数字-->
    <!-- <child :number="111"></child> -->
    <!-- 传递变量-->
    <child
      :number="111"
      :message="msg"
      :obj="obj"
      :arr="arr"
      v-model="info"
      >
    </child>
    <!-- 传递对象-->
   <!-- <child :obj="obj"></child> -->
    <!-- 传递数组-->
    <!-- <child :arr="arr"></child> -->

    <p>{{info}}</p>
  </div>
</template>

<script>
  import Child from './Child'
  export default{
    name:'Parent',
    components:{
      Child
    },
    data(){
      return{
        msg:'中华人名共和国',
        info:'子父组件信息传递,数据实时绑定',
        obj:{
          name:'zcc',
          sex:'男',
          age:'22岁'
        },
        arr:[
         {
            name:'zcc',
            sex:'男',
            age:'22岁'
          },
         {
            name:'zcc',
            sex:'男',
            age:'22岁'
          },
          {
            name:'zcc',
            sex:'男',
            age:'22岁'
          },
        ]
      }
    },
    methods:{
    /*  changeData(val){
        this.msg=val
      } */
    }
  }
</script>
<style>
</style>

时间格式化

自定义js格式化文件

data.js

export function formatDate (date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + ''
      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
    }
  }
  return fmt
}

function padLeftZero (str) {
  return ('00' + str).substr(str.length)
}

使用

在页面引入
由于在date.js中使用export，所以此处导入需要使用{}
在这里插入图片描述页面使用
在这里插入图片描述页面代码

<template>
  <tbody>
    <tr v-for="(item,index) of personArr" v-bind:key="index">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.sex==0?'男':'女'}}</td>
      <td>{{formatDate(item.birthday)}}</td>
      <td>{{item.age}}</td>
      <td></td>
    </tr>
  </tbody>
</template>
<script>
import {formatDate} from '@/assets/js/date.js'
  export default{
    name:'Child',
    props:{
      personArr:{
        type:Array,A
      }
    },
    data(){
      return {

      }
    },
    methods:{
      formatDate:function(time){
        const date=new Date(time)
        return formatDate(date,'yyyy-MM-dd')
      }
    }
  }
</script>

<style>
  #parent{
    text-align: center;
  }
</style>
@全糖去冰
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue使用vue-cli快速创建工程
01-19
本文介绍了vue使用vue-cli快速创建工程，分享给大家，具体如下： vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue ...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
你可以在你的项目中使用vue-cli-service [command] 初始化配置 如果你的项目没有对应的文件，命令会生成vue.config.js 、 Views.json文件 多建 该命令将在上面生成配置的位置构建您的条目，您可
Vue-cli(vue脚手架)上万字总结，超详细教程
weixin_45647685的博客
04-02 3万+
1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录，然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架 显示如图所示说明创建成功 如图命令所示 我们进入myvue工程，执行命令 npm run serve 然后浏览器访问http://localhost:8080/ 到这
Vue-CLI详解
输入技术、输出想法
04-28 2万+
Vue-CLI详解Vue-CLI详解Vue CLICLI是什么意思?拉取 2.x 模板 (旧版本)Vue CLI2创建项目目录结构详解Runtime-Compiler和Runtime-only的区别render和templateVue程序运行过程render函数的使用Vue CLI3创建vue-cli3目录结构详解配置去哪里了？修改配置箭头函数基础语法 Vue-CLI详解 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI;如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue C
Vue CLI
最新发布
m0_48670609的博客
04-26 1002
Vue CLI 简介，Vue CLI 安装，Vue CLI 项目搭建，Vue CLI 目录与文件，Vue CLI 打包与部署
什么是 vue-cli？怎样创建vue-cli项目？
zy1992As的博客
06-21 1万+
vue-cli(俗称：vue 脚手架)是 vue 官方提供的、快速生成 vue 工程化项目的工具。特点：① 开箱即用，② 基于 webpack，③ 功能丰富且易于扩展，④ 支持创建 vue2 和 vue3 的项目vue-cli 的中文官网首页：https://cli.vuejs.org/zh/vue-cli 是基于 Node.js 开发出来的工具，因此需要使用 npm 将它安装为全局可用的工具： 3.解决 Windows PowerShell 不识别 vue 命令的问题 默认情况下，在PowerShe
[VUE] Vue-CLI的安装、使用及环境配置（超详细）
leo的博客
11-20 3万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
Vue 命令行工具 Vue-CLI 详解
wgchen
04-21 1万+
阅读目录阐述vue全家桶vue-cliVue CLI 的安装① 默认安装 vue/cli 脚手架 3② 默认安装失败，解决mode版本问题③ nvm下载太慢问题解决④ 安装 Node ^12.0.0⑤ 从新安装 VueCli 脚手架 3④ 拉取 2.x 模板 (旧版本)⑤ 安装vue指定版本⑥ 博主node版本初始化项目① vue init命令讲解② 项目初始化③ 目录结构详解④ 运行项目node 安装适合小白1 去node官网下载2 下载完成后双击安装包，跳出安装弹窗，点击Next从新来过vue-cli
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：...
vue-cli-plugin-tailwind:Tailwind CSS的vue-cli插件
05-10
vue-cli-plugin-tailwind 一个将Tailwind CSS添加到您的vue-cli项目的插件。入门在您的vue-cli项目文件夹中，通过以下方式添加插件： vue add tailwind选择要生成的Tailwind配置： 无-不会创建一个配置文件。 如果...
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
无需任何代码库修改即可直接使用的vue-cli项目。 目录 用法 vue add vite 插件的生成器将为相应的main。{js，ts}编写一些main.html ，因为vite需要html文件作为dev-server条目文件 动机 我们有很多现有的vue-cli...
脚手架(vue-cli)的安装详细教程
weixin_62268437的博客
07-28 4208
这时候就会出现对应的版本，如果你能终端打印出来这个，说明已经成功一半了，但是这个版本太高了，有时候运行项目的时候会报错，此时我们需要把版本降低，那么如何把版本降低呢？可以把这个链接复制到浏览器回车，也可以左手按住ctrl，右手鼠标点击，他会发生页面跳转，一般是这样子的，但是不一定所有电脑都行，但是前者肯定是可以的！此时你会发现你可能卡到一个地方很久，一直没有动 ，这时候我们可以考虑去切换淘宝镜像或者阿里镜像，这样子下载会快许多！选择要安装的位置，不是必须要安装到C盘中，想安装到哪里就安装到哪里！
安装 Vue-CLI 详细方法及踩坑记录
sywdebug的博客
11-18 7615
配置: 如果环境中没有配置全局目录，那么安装模块时会自动安装装到 C:\User\当前用户\Appdata\Roaming\npm 目录下。原因: 没有权限，以管理员身份运行即可，也有可能是 nodejs 安装后没有配置环境变量。这个玩意我也是第一次见到，清缓存等方法还会给我报错，就记录一下吧，搞了好长时间，最后参考。右键我的电脑 - - - 属性 - - - 高级系统设置 - - - 环境变量。或者使用下面命令安装 cnpm，然后使用 cnpm 进行安装。用户变量和系统变量应该都是可以的。
vue入门---npm指令
yookooi
07-25 1152
view入门---npm指令
vue-cli使用指南
chy1984的博客
08-28 2606
需要通过this来调用methods中的方法// 加this this . getTaskList();// 加this this . getTaskList();} , }
vue-cli脚手架的安装与配置
m0_64227118的博客
12-07 485
弹出一下选择，上下可以选择创建vue2或者vue3项目或者手动选择自己项目中要用到的技术，选中后点击回车。如果没有出现下图的字样，可以关闭cmd窗口，再进入重试，如果还是不行就参考以下链接。npm install -g @vue/cli这两个命令。输入一下命令创建一个项目name可以换成你的项目名称。创建完成后输入npm run serve运行。如果出现vue不是内部或外部命令，就再输入。出现以下打开local端口服务器正常运行。建立或者打开一下文件夹目录。出现这个就代表安装成功。
初识 Vue脚手架
Alienkp的博客
07-25 511
stylescoped="scoped">或者简写为。data(){return{msg"脚手架写大项目"}}（3）运行npmi@vue/cli-g(安装vue脚手架)package-lock.json插件安装地址缓存（较重要）（1）node官网下载node.js(下载过可以调过这一步)bable.config.jsES6转ES5配置。vue.config.jsvue项目配置文件。----HelloWorld.vue默认组件。jsconfig.jsonjs配置。......
Vue项目 npm i 报错npm ERR! code 1
热门推荐
qq_44560143的博客
09-28 4万+
Vue项目 npm i 报错npm ERR! code 1记录一下 npm i 的时候报错，报错信息如下 记录一下 npm i 的时候报错，报错信息如下 npm ERR! code 1 npm ERR! path D:\workspace\exchange\exchange-web\exchange-web-ui\node_modules\node-sass npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s
vue项目初学者npm如何安装与配置
Laity07的博客
05-19 2656
vue项目初学者npm如何安装与配置

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值