webstorm创建vue项目

最新推荐文章于 2024-10-31 16:55:31 发布

置顶

菜鸟成长之路-wei

最新推荐文章于 2024-10-31 16:55:31 发布

阅读量9.2k

点赞数 7

分类专栏：网页

随便复制吧

本文链接：https://blog.youkuaiyun.com/wang342626/article/details/105681179

版权

本文详细介绍了如何使用webstorm创建Vue项目，包括新建项目步骤、git操作、项目结构、Element UI与Mint UI的使用、scss安装、vue路由、axios的集成与封装、vuex管理和组件交互等关键知识点，同时还涵盖了vue项目的打包上线流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 新建项目步骤

创建vue-cli项目步骤：https://www.cnblogs.com/mapengfei247/p/11074429.html
其中改用npm install --global @vue/cli

@vue/cli v4官方中文文档: https://cli.vuejs.org/zh/guide/prototyping.html

离线创建项目步骤：
https://blog.youkuaiyun.com/XuM222222/article/details/85161178

我已经把github复制到gitee上,下载下来项目速度会很快https://gitee.com/wangwei135/vue-cli-templates.git
复制项目下来之后整个文件夹复制到C:\Users\username\.vue-templates并重命名为webpack，
然后cmd中输入vue init <template-name> <project-name> --offline，也就是vue init webpack project --offline, 之后会自动创建project文件夹
首先打开App.vue,删除那一行代码margin-top: 60px;

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/   // 这一行代码删除掉,或者注释掉
}

git基本操作

gitee创建一个supermalll的仓库，复制提交地址https://gitee.com/username/projectName.git
控制台中输入

git init
git status
git add .
git commit -m "第一次初始化"
git remote add origin https://gitee.com/username/projectName.git
git push -u origin master

推送到云端报错的解决方法： https://www.cnblogs.com/xiyin/p/7625293.html
还有一种简易的方法：先下载gitee仓库的空白代码，然后复制.git文件夹替换到项目中，再推送。

项目结构

在这里插入图片描述

设置别名alis
https://www.cnblogs.com/xiaofenguo/p/7603086.html
设置完之后还需要重启项目。
默认@表示src

二.使用element UI库

使用方法：安装 npm i element-ui -S
然后main.js中写入代码

// 引入el ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

然后就可以直接使用了,例如在index.vue中写<el-button>Let's do it</el-button>就出现一个按钮。
更多组件见官网：https://element.eleme.cn/#/zh-CN/component/select

二.使用移动端UI库-Mint UI

官网地址： https://mint-ui.github.io/#!/zh-cn
使用方法：安装npm install mint-ui -S
然后main.js写入

// 引入全部组件
// 引入mint-ui全部组件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

三.安装使用scss

scss是sass的高级版
安装教程: https://blog.youkuaiyun.com/zhouzuoluo/article/details/81010331
报错解决方法: https://www.cnblogs.com/blucesun/p/11463426.html

我的操作:

# 版本8可能会报错
cnpm install sass-loader@7.3.1 --save-dev
cnpm install node-sass --sava-dev

然后配置 build/webpack.base.js中的module, rules下面添加:
{
test: /\.scss$/,
   loaders: ['style', 'css', 'sass']
},

最后使用:
<style scoped lang="scss">
  $color:red;
  div {
    color:$color;
  }
重新 npm run dev即可

vue插槽

插槽slot只是被用来替换的，文本会覆盖掉一些属性，所以文本的slot外最好套一层div,例如

<!--  class为active的绑定值isActive-->
<div :class="{active:isActive}"><slot  name="slot-item-text"></slot></div>

而不是<slot :class="{active:isActive}" name="slot-item-text"></slot>

四.vue安装与使用路由router

npm install vue-router --save --save表示运行时依赖
根目录下新建文件夹router，router里面新建index.js,写入

import Vue from 'vue'
import Router from 'vue-router'

// 定义跳转页面的组件
const Home = () => import('../pages/home/Home')
const Cart = () => import('../pages/cart/Cart')
const Category = ()=> import('../pages/category/Category')
const Profile = ()=> import('../pages/profile/Profile')

// 1. 安装插件
Vue.use(Router)

// 3.导出router
export default new Router({
  // 2. 创建路由
  routes: [
    {
      // 定义默认跳转的页面
      path: '/',
      redirect: '/home'
    },{
      // 挨个设置页面调整的组件
      path:'/home',
      component:Home
    },{
      path: '/cart',
      component:Cart
    },{
      path: '/category',
      component:Category
    },{
      path: '/profile',
      component:Profile
    }
  ],
  // 默认使用hash模式，改用history模式
  mode:'history'
})

src下面main.js添加

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from