vue+webpack+vscode打造TODO应用

1. 安装visual studio code编辑器  https://code.visualstudio.com/Download
2. 配置vscode
3. 将用户设置为自动保存
4. Ctrl+~键可直接进入vscode的命令行
5. 初始化成npm项目
6. ，应该生成一个package.json文件；
7. 安装webpack和vue-loader
8. 安装缺少的依赖
9. 
10. 完成后，在相应的命令行目录下就会新建成这样
11. ：
12. 新建相应的文件，app.vue，编写相应代码。但是该文件不能直接在浏览器打开，所以新建一个webpack.config.js文件
13. 用来打包前端资源
14. 进行一些属性配置
15. 
16. 
17. 运行npm run build可能出错
18. 

19. 大致意思就是：未设置mode(模式)，请指定是“开发环境”还是“生产环境”；

    如何解决呢？只需要在package.json中添加配置项：

    "scripts": {
        "start": " --mode development",
        "build": "--mode production",
      }

    执行 npm start 处于开发中调试，有些是 npm run server，只是配置不同而已；执行 npm run build 打包项目，也就是打包成上线后的代码；

20. 

21. 再次运行后就不报错了。

22. 进行静态资源文件vue类型，css,图片类型等类型文件配置需安装相应依赖，进行相应声明。配置.styl类型的css预处理器stylus等

23. 

24. 进一步配置时安装相应的依赖，使用命令npm i ....

    npm i css-loader style-loader file-loader stylus-loader stylus

25. 安装webpack-dev-server包

    npm i webpack-dev-server

    能够提高开发效率，指定的是开发环境

26. 
      "dev": "webpack-dev-server --config webpack.config.js"

     

27. 保证脚本同时使用在正式环境和开发环境中，需要根据不同环境做判断

28. 安装cross-env,设置一个环境变量，标识是开发环境还是正式环境。作用是保证跨平台时仍使用同一个脚本，声明同一个开发环境

29.  "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

     

30. 在webpack.config.js文件中进行配置，启动的时候设置的脚本变量全部存在process.env这个对象里，可以设置很多变量名，都可以通过该对象读取到。

31. 

32. 设置host为0.0.0.0的好处：可通过别的电脑或手机访问本电脑的ip,设置为localhost会有一定的局限性。

33. 

34. 安装html插件

    npm i html-webpack-plugin

    作为前端项目，没有html入口是无法打开的，所以安装一个webpack的html插件

35. 

36. plugins是一个数组，有很多配置选项

     plugins:[      //plugin的基础配置
            new webpack.DefinePlugin({   //判断环境，使用变量进行区分，在打包时使用正式环境
                'process.env':{
                    NODE_ENV:isDev?'"development"' : '"production"'  //双引号一定要加，否则会报错
                }
            }),
            new HTMLPlugin()
        ]
    }

    开发环境有很多错误提醒，对于开发环境比较友好，但是正式打包时文件回国大，不利于加载速度，所以定义变量来区分打包版本。vue项目和react项目都要如此考虑。

37. 此时可以运行项目:   npm run dev

38. 网址改为localhost:8000

• 相关配置

1. webpack官方提供的配置#cheap-module-eval-source-map用来调试代码。

2. 代码编写的是es6代码，直接在浏览器中调试是看不懂的，需要映射一下

3. 

4. 重启一下，重新编译。

• vue2

数据绑定，vue文件的开发方式

API重点

安装postcss-loader

npm i postcss-loader autoprefixer babel-loader babel-core

在根目录下新建 .babelrc 和postcss.config.js文件

postcss.config.js文件用来后处理css文件。当.styl类型的文件编译成css文件后，用post来优化css代码，通过一系列的逐渐来优化。

安装.babelrc文件所需的配置文件，转换env和jsx文件用的

npm i babel-preset-env babel-plugin-transform-vue-jsx

 

在webpack.config.js中加上相应的配置：

安装缺少的相应文件

npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx

 

转载于:https://my.oschina.net/u/3052153/blog/1798019