精华内容
下载资源
问答
  • webstorm 创建vue项目

    2019-09-09 17:39:55
    第一次利用那个webstorm 创建vue 1 2 选择一个空的文件夹vue-map为文件夹名称 要选择vue3 默认选择 这就创建好了 默认的加载说明 index.html 不要动位置 不然会找不到的 ...

    第一次利用那个webstorm 创建vue

    • 1
      在这里插入图片描述
    • 2 选择一个空的文件夹vue-map为文件夹名称
    • 要选择vue3
      在这里插入图片描述
    • 默认选择
    • 在这里插入图片描述
    • 这就创建好了

    • 在这里插入图片描述
    • 默认的加载说明

    在这里插入图片描述

    • index.html 不要动位置 不然会找不到的
    • 在这里插入图片描述
    • 在这里插入图片描述
    展开全文
  • webstorm创建vue项目

    千次阅读 2020-04-22 14:21:12
    步骤 webstorm新建空项目project1 控制台输入vue create supermall 然后相关设置 gitee创建一个supermalll的仓库

    一. 新建项目步骤

    创建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.csdn.net/XuM222222/article/details/85161178

    1. 我已经把github复制到gitee上,下载下来项目速度会很快https://gitee.com/wangwei135/vue-cli-templates.git
    2. 复制项目下来之后整个文件夹复制到C:\Users\username\.vue-templates并重命名为webpack,
    3. 然后cmd中输入vue init <template-name> <project-name> --offline,也就是vue init webpack project --offline, 之后会自动创建project文件夹
    4. 首先打开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基本操作

    1. gitee创建一个supermalll的仓库,复制提交地址https://gitee.com/username/projectName.git
    2. 控制台中输入
    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.csdn.net/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

    1. npm install vue-router --save --save表示运行时依赖
    2. 根目录下新建文件夹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'
    })
    
    
    
    1. 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 './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    
    1. pages下面创建多个*.vue,并在index.js中配置映射关系,见2
    2. App.vue中插入<router-view></router-view> 作为跳转的视图
    3. 写点击函数跳转,并改用history模式跳转
    itemClick(){
      console.log("点击了,正在跳转页面");
      // this.$router.replace('/home');
      // this.$router.push(this.path) // 点击相同页面就会报错
      // 点击相同页面就不会报错了
      this.$router.push(this.path).catch(err=>err);
    }
    
    1. 判断当前的是哪个页面
    if(this.$route.path.indexOf(this.path)>0) {
     return true;
     } else {
       return false;
     }
     // $route表示当前点击的页面,$router表示全局路由,二者不一样
    

    更多官方文档:https://router.vuejs.org/zh/guide/

    七. 使用axios

    1. npm install --save axios 然后node_module中多了axios这个文件夹
    2. 然后src下面新建api文件夹,里面新建ajax.js, 并写入import axios from 'axios'即可使用axios了。

    若浏览器报错No 'Access-Control-Allow-Origin' header is present on the requested resource.需要解决浏览器跨域操作:
    配置 config/ index.js 的dev下面:

    // config/index.js的dev下面
    // 解决跨域url请求
        proxyTable: {
          '/api': {
            target: 'http://localhost:80',//后端接口地址
            changeOrigin: true,//是否允许跨越
            pathRewrite: {
              '^/api': '',  //重写, 以后调用时,必须调用时要用api/Test/xxx.php,而不是http开头的网址
            }
          }
        },
    

    然后重启npm run dev, 前端跨域只针对开发模式, 生成模式不生效.

    axios基本例子

    php后台post情况:

    Headers中Content-Type为 multipart/form-data 的数据,
    或者 application/x-www-form-urlencoded 的数据, 请使用:
    $username = $_POST['username']; 
    
    接收application/json 的数据,请使用:
    如下就可以接收 application/json,  postman中body改为raw的方式提交
    $data = file_get_contents('php://input');
    $data = json_decode($data);  // json字符串转为json对象,对象只能使用->访问,数组可以使用['username']访问
    $username = $data->username;
    $password = $data->password;
    

    axios综合get与post请求

    axios的post的三种情况: https://segmentfault.com/a/1190000015261229?utm_source=tag-newest

    x-www-form-urlencoded与multipart/form-data区别:https://www.cnblogs.com/kaibin/p/6635134.html

    //  src/api/ajax.js中
    import axios from 'axios'
    import qs from 'qs'  // 需要npm install qs
    
    // 封装axios请求,返回一个Promise, type1表示get请求,2表示post的application/json,3表示
    export default function ajax(url,data,type=1){
      if(type==1){
        // 发送get请求
        return axios({url:url,
          methods: 'get',
          params : data
        });
      }else if(type==2){
        // post请求,application/json请求
        return axios({
          url:url,
          Headers:{'Content-Type':'application/json'},
          method:'post',
          data: data
        });
      }else{
        // post请求,使用qs把application/json请求转为application/x-www-form-urlencoded
        return axios({
          url:url,
          Headers:{'Content-Type':'application/json'},
          method:'post',
          data: qs.stringify(data)
        });
      }
    }
    // 注意: post请求使用body发送数据, get可以使用url或者params发送数据
    

    调用:

    import ajax from "@/api/ajax";
    
    let data = {'username':this.username,'password':this.password};
    console.log(data);
     let url = 'api/Test/login_del4.php';
     ajax(url,data,1)    //
       .then(res=>{
         // 请求成功
       		console.log(res.data);
       		let data = res.data;
            let obj = JSON.parse(data); // 字符串转为obj, 字符串必须要{"code":"1","result":"测试wang"}, 不能使用单引号,会报错
            if(obj.code=="1"){
              alert("登陆成功!")
            }else{
              alert("登陆失败,"+obj.result);
            }
     }).catch(err=>{
       // 请求失败
       console.log(err);
     });
    

    php后台

    // 处理get请求
    $username = $_GET['username'];
    
    // 处理post请求
    // 如下就可以接收 application/json 
    $data = file_get_contents('php://input');
    $data = json_decode($data);  
    // json字符串转为json对象,对象只能使用->访问,数组可以使用['username']访问
    $username = $data->username;
    $password = $data->password;
    
    // php返回的json字符串, 占位符
    $data = sprintf('{"code":"0","result":"用户名%s不存在","method":"%s"}',$username,$method);
    
    

    注意:巨坑, 不能是单引号与双引号反过来使用

    java后台对象转为json字符串,那么js就不需要使用 let obj = JSON.parse(data)了

    Student stu = new Student("公众号编程大道", "m", 2);
    
    //Java对象转换成JSON字符串
    String stuString = JSONObject.toJSONString(stu);
    System.out.println("Java对象转换成JSON字符串\n" + stuString);
     //   {"age":2,"name":"公众号编程大道","sex":"m"}
    

    对axios封装

    封装,以防以后更换axios

    // 多个全局配置实例
    const axiosInstance1 = axios.create({
      baseURL:"http://localhost:80",
      timeout:5000
    })
    const axiosInstance2 = axios.create({
      baseURL:"http://localhost:8080",
      timeout:10000
    })
    
    // 对axios封装,以防以后更换axios
    export default function req(config) {
      const axiosInstance1 = axios.create({
        baseURL:"http://localhost:80",
        timeout:5000
      })
      return axiosInstance1(config);  // 默认返回的是Promise类型
    }
    
    // 调用
    req({
      url:'/Test/login_del.php',
    }).then(res=>{
      console.log(res);
    }).catch(err=>{
      console.log(err);
    })
    
    

    五.使用vuex管理全局数据

    1. 安装npm install vuex --save
    2. src下面创建store文件夹, 里面创建index.js,
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    // 1.安装插件
    Vue.use(Vuex)
    
    // 2.创建对象
    const store = new Vuex.Store({
      state:{
        // 存放变量
        isLogin:false
      },
      mutations:{
        // 修改变量的函数, 组件调用 this.$store.commit('setUsername',this.username);
        // 只能同步修改变量
        setUsername(state,username){
          state.username = username;
          state.isLogin = true;
        }
      },
      actions:{
    		// 组件调用只能使用 dispatch
    		// 这里的函数需要使用commit调用mutations
      },
      getters:{
    		// 获取值,也可以添加filter, 
    		// 调用let a=this.$store.getters.getLoginStatus;  // 只能无参数一定不加括号,否则报错, 
    	    getLoginStatus(state){
    	      return state.isLogin;
    	    }
      },
      modules:{
    		// 套娃
      }
    })
    
    // 3.导出
    export default store
    
    // 4. main.js中 import并挂载store
    
    
    1. main.js中添加:
    import store from "./store";
    Vue.prototype.$store = store
    

    后续…

    computed和methods和data区别

    computed表示计算属性,编写函数用于替换模板中复杂的逻辑,使用了缓存。
    methods里面存放多个函数。
    官网computed与methods对比

    v-show和v-if和v-for等

    v-show与v-if区别
    v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
    而 v-if 将会移除当前DOM。

    一般来说,v-if 会牵涉到虚拟 DOM diff 算法,有更高的切换开销,而 v-show 有更高的初始渲染开销。

    因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    key 并不与 v-for 特别关联,建议尽可能在使用 v-for 时提供 key

    <div v-for="item in items" :key="item.id">
      <!-- 内容 -->
    </div>
    

    数组中更新某一个元素
    app.items[indexOfItem] = newValue 替换成

    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
    

    vue动态绑定class与style

    官网链接
    在这里插入图片描述
    在这里插入图片描述动态绑定style过于复杂时,也可以使用method或者computed。

    举例0

    如果isActive值为true,则active类生效,以此类推
    <span v-bind:class="v-bind:class="{'active':isActive,'red-bg':isRed}"">哈哈哈</span>
    
    另外class绑定数组
    <span v-bind:class="[activeClass,bgColorClass]">哈哈</span>
    activeClass值等于什么,就使用什么class样式
    

    举例1:使用算出来的样式

    其中$可以去掉,这里表示区分变量而已
    <div  v-for="$div in divs" 
    		:style="{'position':'absolute','left':$div.x+'px','top':$div.y+'px'}">
          
          <p>{{$div}}}</p>
    </div>
    

    举例2:使用computed样式

    <div :style=" showNodeInfoStyle">
                <textarea :value="nodeName">123</textarea>
    </div>
      
      
      computed:{
            // 显示节点窗口的样式
            showNodeInfoStyle(){
                return {'border':'1px solid red','position':'absolute','left':'5px','top':'10px'}
        },
    
     <p v-bind:style="[styleObject1,styleObject2]">你好,实验楼</p>
     
     data:{
                    //样式一
                    styleObject1:{
                        fontSize:'26px',
                        backgroundColor:'pink'     
                    },
                    //样式二
                    styleObject2:{
                        marginTop:'200px',
                        textAlign:'center'
                    }
                }
    

    举例3:computed里无法传递参数,style可以使用methods传递参数

    <div v-for="$div in divs" :style="showNodeDetailStyle2($div)">
                    <p>{{$div}}}</p>
     </div>
    
    
    methods:{
            showNodeDetailStyle2(div){
                return {'position':'absolute',
                    'left':(div.x+canvas.offsetLeft)+'px',
                    'top':(div.y+canvas.offsetTop)+'px'
                }
            }
    }
    

    vue事件修饰符与按键修饰符

    • .stop(阻止单击事件继续传播)
    • .prevent(阻止事件默认行为)
    • .capture(添加事件监听器时使用事件捕获模式)
    • .self(只当在 event.target 是当前元素自身时触发处理函数 )
    • .once(点击事件将只会触发一次)
    • .passive(滚动事件的默认行为 (即滚动行为) 将会立即触发 )
    //未添加 .stop修饰符,事件会触发冒泡行为,点击子元素也会触发父元素的相同事件,加了之后只出发子事件
    <div class="super" v-on:click.stop="handleClick('super')">
                父
                <div class="child" v-on:click.stop="handleClick('child')">
                	子
                </div>
     </div>
    

    阻止表单提交的例子

    // 必须要action=''
    <form action="/" v-on:submit.prevent="func">
           <button type="submit">提交</button>
        </form>
    
    methods:{
        func(){
          alert("阻止提交");
        }
      }
    

    按键修饰符

    .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right
    
    <input type="text" v-on:keyup.enter="alert('你按了enter,确定输入完毕?')"/>
    <div @click.ctrl="alert('你同时按了鼠标点击和ctrl')">Do something</div>
    

    vue表单

    最好的示例实验楼:https://www.shiyanlou.com/courses/1262/learning/?id=10341

    文本框
    v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源,所以value值无效了,只能在vue中的data修改值
    <input v-model.lazy="msg" >
    默认是绑定input事件,.lazy可以换成change事件,输入完成才变化
    
    <input v-model.number="number2" type="number" >  会自动转为number类型
    <input v-model.trim="msg" type="text" />    首尾空格,自动过滤。
    
    
    单选按钮
    <!-- 将单选按钮绑定到同一个picked -->
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
    data() {
                    return {
                        picked: ''
                    }
                }
    
    一个勾选框
    <input type="checkbox" id="checkbox" v-model="checked">
            <label for="checkbox">{{ checked }}</label>
    data() {
                    return {
                        checked:false
                    }
                },
    多个勾选框
    <input type="checkbox" id="syl1" value="syl1" v-model="checkedNames">
            <label for="syl1">syl1</label>
            <input type="checkbox" id="syl2" value="syl2" v-model="checkedNames">
            <label for="syl2">syl2</label>
            <input type="checkbox" id="syl3" value="syl3" v-model="checkedNames">
            <label for="syl3">syl3</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
     data() {
                    return {
                        checkedNames: []
                    }
                }
                
    下拉框
    <select v-model="selected">
                <option disabled value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span>Selected: {{ selected }}</span>
    data() {
                    return {
                        selected: ''
                    }
                }
    

    表单综合示例: https://www.shiyanlou.com/courses/1262/learning/?id=10341

    vue组件

    主组件data是对象,不是函数,不需要return{}
    子组件的data必须是函数.
    注意:

    • 在vue-cli中, main.js中是主组件,其他的*.vue中都含有export default,全都是子组件,必须要用函数return{}, 否则报错都很难找到原因。

    vuejs调用某个组件

    1. 先写好Nav-bar.vue
    2. 在index.vue中引入
    3. 先import, 再写compoents 最后写html
    4. 注意驼峰大小写,区分Nav-bar与navBar
    <template>
      <div id="app">
      	// 1
        <NavBar></NavBar>
      </div>
    </template>
    
    <script>
    	// 2
      import NavBar from "./components/navbar/NavBar";
    export default {
      name: 'App',
      components:{
      	// 3
        NavBar
      }
    }
    </script>
    

    vue组件父传子

    父
    // 传递path值给子
    <NavBarItem path="home"> 首页</NavBarItem>
    
    子
    <script>
        export default {
          name: "NavBarItem",
          // props接受传过来的参数
          props:{
            path:String,
            activeColor: {
              type:String,
              default:'red'
            }
          },
          data(){
    	  	return{ } //vue-cli中大多数都要写return
    	  },
          computed:{},
          methods:{}
        }
    </script>
    

    vue子传父

    子
    this.$emit('事件名称', '参数');
    
    父
    var app = new Vue({
                el: '#app',
                methods: {
                    getMsg:function(msg){
                        //弹出子组件传递的信息
                        alert(msg)
                    }
                },
            })
    

    组件生命周期

    beforeCreate() {
        alert('在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用')
    },
    created() {
    	// created 钩子函数内我们可以进行异步数据请求
        alert('在实例创建完成后被立即调用,挂载阶段还没开始,$el 属性目前不可见')
    },
    beforeMount() {
        alert('在挂载开始之前被调用:相关的 render 函数首次被调用')
    },
    mounted() {
    	// mounted 我们可以直接操作元素 DOM 了 ,但是并不推荐这样做,不利于性能提升。
        alert('el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子')
    },
    beforeUpdate(){
        alert('数据更新时调用')
    },
    updated(){
        alert('组件 DOM 已经更新')
    },
    beforeDestroy(){
    },
    destroyed() {
    },
    

    六.vue项目打包

    初始化项目之后,直接修改build/index.js如下

    // 注意要修改build,而不是dev,否则npm run dev会报错
    build: {
    	// 原来 assetsPublicPath: '/', 改为
    	assetsPublicPath: './',
    	// 原来productionSourceMap: true,改为false
    	productionSourceMap: false,
    }
    

    然后直接复制dist文件夹到apache的www目录中即可发布上线。


    关于一些情况的补充:

    1. 此时static下面新增图片,然后添加index.vue如下代码,依然可以成功打包。
    // index.vue
    <img src="static/logo.png">
    
    1. 若使用router哈希模式和历史模式如下配置,依然可以打包成功。
    /* router/index.js */
    // 定义跳转页面的组件
    const Home = () => import('../pages/home/Home')
    const Cart = () => import('../pages/cart/Cart')
    const Category = ()=> import('../pages/category/Category')
    const Profile = ()=> import('../pages/profile/Profile')
    
    {
          // 挨个设置页面调整的组件
          path:'/home',
          component:Home
        },{
          path: '/cart',
          component:Cart
        },{
          path: '/category',
          component:Category
        },{
          path: '/profile',
          component:Profile
        }
    
    1. 图片放在assets下面, 使用css的background:url("../../assets/img/bg/eva1.jpg") no-repeat;相对路径导入图片, 然后打包的项目会提示找不到路径, 错误GET http://localhost/dist1/static/css/static/img/eva1.e0478e3.jpg 404 (Not Found)
      解决方法:
      删掉mode:'history',使用哈希路由,
      然后打开 build/utils.js 加一行
    // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            publicPath:'../../',  // 多加这一行,解决打包css背景图相对路径的情况
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
    
    1. 关于图片的更多路径问题后续讨论
    展开全文
  • Webstorm创建VUE项目

    2020-04-14 17:29:45
    2.在某个目录下创建项目vue init webpack projectName 3.进入项目目录,cd projectName 4.启动项目 ,npm run dev 5.输入网址 localhot:8080 端口号为自己的,如下页面代表成功 6.将项目移植到Webstorm,...

    1.安装完毕所有组件npm,node,webpack

    2.在某个目录下创建项目:vue init webpack projectName

    3.进入项目目录,cd projectName

    4.启动项目 ,npm run dev

    5.输入网址 localhot:8080  端口号为自己的,如下页面代表成功

     

    6.将项目移植到Webstorm,使用webstrom打开项目

    7.配置项目添加启动配置省略,网上资料一堆

    展开全文
  • webstorm 创建Vue项目

    2020-01-17 19:58:52
    重要的一点,想用WebStorm创建项目得安装git。 安装很简单,官网找到下载安装即可,否则可能出现安装不了的情况   红色为新建的顺序,绿色为node.js地址(装好了会自动寻找),蓝色为vue.js包的地址,黄色为...

    本文只针对新手。

    首先要明白几个名词(概念)。

    Node.js:

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 
    Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 

    Node.js 的包管理器 npm,是全球最大的开源库生态系统。

    npm:

     

    npm全称为Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器(类似于java中的Maven)。

    npm的初衷:JavaScript开发人员更容易分享和重用代码。

    npm的使用场景:

    允许用户获取第三方包并使用。
    允许用户将自己编写的包或命令行程序进行发布分享。
    npm版本查询:npm -v 

     

    Webpack

    WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

    下面进入正题

    首先现在webstorm,node.js

     注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本.

    1.下载安装包之后直接点击安装即可。测试安装成功的界面如下:

    2.安装淘宝镜像(类似于阿里云的maven中央仓库镜像)

    安装时间有点长

    安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

    验证命令:cnpm -v

    3.安装webpack

    利用cnpm安装webpack 命令行语句为cnpm install webpack -g  。时间略长。测试安装成功的界面如下:

     

    4.接下来就是全局安装vue-cli。时间略长

    安装语句为:cnpm install --global vue-cli

    验证命令:vue -V (V要大写)

    5.下面开始使用WebStorm

    重要的一点,想用WebStorm创建项目得安装git。 安装很简单,官网找到下载安装即可,否则可能出现安装不了的情况

     

    红色为新建的顺序,绿色为node.js地址(装好了会自动寻找),蓝色为vue.js包的地址,黄色为打包所用的打包模块

    填写项目名,注意项目名中不能包含大写字母。

    一直点下一步就可以了,项目结构

    选中package.json 右键选择 show npm scripts

    选择dev双击 即可进行测试。开启成功后会出现默认的端口,赞帖到浏览器中打开,出现下面页面就是成功啦。这样一个vue项目就创建成功了


    ————————————————
    版权声明:本文为CSDN博主「放学等我别走」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_40760196/article/details/79952652

    展开全文
  • webStorm创建vue项目

    2019-11-27 14:48:32
    需要node.js环境 可以看我博文:https://mp.csdn.net/mdeditor/101055914 项目名不能有大写字母 |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-versi...
  • WebStorm创建vue项目

    2020-01-15 10:46:05
    写的不错,转载一下,以后忘了可以回顾
  • WebStorm创建VUE项目

    2019-07-31 21:30:39
    今天是项目开始的第二天,主要任务是把前端的项目先搭建起来,比较琐碎的一些准备工作 首先下载nodejs,下载地址http://nodejs.cn/download/,下载后一路下一步进行安装,安装完毕后使用win+R调出控制填,输入cmd,...
  • 1、安装webstorm,node.js node -v npm -v ...cnpm -v 3、安装打包工具:cnpm install webpack -g webpack -v yes ...4、安装vue脚手架:cnpm install --global vue-cli ...5、WebStorm创建VUE项目 ...
  • webstorm创建vue项目

    千次阅读 2018-12-06 12:00:41
    利用webstorm创建vue项目,步骤如下: 打开 mac 终端,直接运行安装vue-cli:npm install vue-cli -g vue-cli下载完之后,跳转到创建vue项目的文件夹下,运行:vue init webpack myproject1 (myproject1是我的vue...
  • 解决webstorm创建vue项目报错: 报错如下: 0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'D:\\Work Programs\\node\\node.exe', 1 verbose cli 'D:\\Work Programs\\node\\node_modules\\...
  • webstorm创建vue项目 一、版本 webstorm版本 2021.1.1 node 版本 14.16.0 vue.cli 版本 4.5.13 二、新建 1. create 选择自定义配置选项。(按上、下健切换选项,按空格键选择选项,按i键反选) 选择安装插件,说明...
  • 安装需要的环境可以参考这篇...[用webstorm搭建vue项目][1]. 创建项目时这里要选择No,不然开发的时候代码多打一行空格也会报错。 [1]: https://blog.csdn.net/weixin_40760196/article/details/79952652 ...
  • 1 打开WebStorm2018,创建项目 2 选择vue.js项目类型,填写项目位置,下一步 3 vue-cli插件项目构建中。 4填写项目名称 5 项目描述 6作者 7 8 9使用ESLint 10 11 ...
  • webStorm创建vue项目完整步骤

    千次阅读 2019-09-22 21:06:36
    目标:在webStorm,IDE中创建一个vue脚手架demo 1、安装nodejs,详情看官网,下载安装包 2、安装webpack,前端资源打包工具,下载完成后切记在cmd中检查版本号 如果没有显示,在运行窗口输入sysdm.cpl -> 高级,...
  • 前几天买了新电脑,准备入手vue项目,配置了一下 详细教程:https://blog.csdn.net/weixin_40760196/article/details/79952652 1、首先下载webstorm,官网安装下载就好啦,没什么难度,不说啦 2、其次安装node,官网...
  • (已经有Node环境,之前创建项目) 点击new新建 点击下一步,只有ESLint选为No 在新的窗口,npm run dev ,能正常启动的话,项目就OK了!如果报错,比如:少各种东西 Cannot find module ‘extract-text-webpack...
  • 进行vue开发首先需要配置node环境 配置好node环境在命令行中输入node -v npm -v则表示环境配置成功 ...vue init webpack ate ate代表项目名 3、会出现项目描述,作者等,是否安装vue-router(yes) 后面会提示是...
  • webStorm创建vue项目环境

    万次阅读 2018-09-11 23:30:07
    下载完毕后,可以安装node,建议不要安装在系统盘(如C:)。   ...二、设置nodejs prefix(全局)和cache(缓存)路径 ...1、在nodejs安装路径下,新建node_global和node_cache两个文件夹 ...D:\vue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,032
精华内容 1,212
关键字:

webstorm创建vue项目

vue 订阅