Idea下搭建Vue

最新推荐文章于 2023-05-17 15:10:34 发布

亦难亦安

最新推荐文章于 2023-05-17 15:10:34 发布

阅读量257

点赞数

分类专栏：学习日记文章标签： css js

学习日记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

搭建idea下的Vue工程：

使用idea新建Static Web项目：demo

npm i -g cnpm --registry=https://registry.npm.taobao.org
cnpm i -g vue-cli
vue -V
cd ~/IdeaProjects/
vue init webpack demo
    提示目录已存在，是否继续：Y
    Project name（工程名）:回车
    Project description（工程介绍）：回车
    Author：作者名
    Vue build（是否安装编译器）:回车
    Install vue-router（是否安装Vue路由）：回车
    Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n
    Set up unit tests（安装测试工具）：n
    Setup e2e tests with Nightwatch（也是测试相关）：n
    Should we run `npm install` for you after the project has been created? (recommended)：选择：No, I will handle that myself
cd demo
cnpm i
cnpm install
cnpm run dev
安装项目依赖,分别是scss支持，ajax工具，element ui，两个兼容包
cnpm i node-sass -D
cnpm i sass-loader -D
cnpm i axios -D
cnpm i element-ui -D
cnpm i babel-polyfill -D
cnpm i es6-promise -D

配置idea

File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认
File - Settings - Plugins：搜索vue，安装Vue.js
Run - Edit Configurations…：点击加号，选择npm，Name为Dev，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了。
继续点击加号，选择npm，Name为Build，package.json选择你工程中的package.json，Command为run，Scripts为build,然后就可以直接在idea中打包了。

修改项目配置

修改/config/index.js文件，找到

port: 8080
修改为
port: 8070

productionSourceMap: true
修改为
productionSourceMap: false

修改/build/webpack.base.conf.js文件，找到

module.exports = {
  entry: {
    app: './src/main.js'
  },
修改为
module.exports = {
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },

最后在src/main.js中加入

import 'es6-promise/auto'
import promise from 'es6-promise'
import Api from './api/index.js'
import Utils from './utils/index.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.prototype.$utils = Utils;
Vue.prototype.$api = Api;
Vue.use(ElementUI);

注：使用static里的文件尽量使用绝对路径，如/static/image/background.png

使用src里的文件则尽量使用相对路径。

js中的事件类型：

https://developer.mozilla.org/zh-CN/docs/Web/Events
我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM事件部分</title>
    <style type="text/css">
        #a{
            background-color: #00B7FF;
            width: 200px;
            height: 50px;
            padding-top: 25px;
            text-align: center;
            margin: auto;
        }
        #b{
            background-color: #bbffaa;
            width: 200px;
            padding-top: 50px;
            text-align: center;
            margin: auto;

        }
        .center{
            background-color: beige;
            width: 600px;
            height: 600px;
            /*加滚动条*/
            overflow-y:auto;
            text-align: center;
            /*外层DIV元素居中*/
            margin: 0 auto;
            /*使用弹性布局使内部DIV元素也居中*/
            /*display:flex;*/
            /*justify-content: center;*/
            /*align-items: center;*/

        }
    </style>
</head>
<body onload="checkCookies()">
    <div class="center">
        <h3>鼠标移动的事件</h3>
        <div id="a" onmouseover="mOver(this)" onmouseout="mOut(this)">鼠标移动的事件</div>
        <h3>鼠标点击的事件</h3>
        <div id="b" onclick="change(this)">点我</div>
        <h3 id="c">向button元素分配一个onclick事件</h3>
        <button onclick="displayDate()">点我</button>
        <h3>输入字段的验证</h3>
        <input type="text" id="name" onchange="yanZheng()">
    </div>

    <script>
        function mOver(obj) {
            obj.innerHTML="看到你了"
        }
        function mOut(obj) {
            obj.innerHTML="看不到你了"
        }
        function change(id) {
            id.innerHTML="hi"
        }
        function displayDate() {
            document.getElementById("c").innerHTML=Date();
        }
        function checkCookies() {
            if (navigator.cookieEnabled==true)
            {
                alert("Cookies are enabled")
            }
            else
            {
                alert("Cookies are not enabled")
            }
        }
        function yanZheng () {
            var x=document.getElementById("name");
            x.value=x.value.toUpperCase();
        }
    </script>
</body>
</html>