最近学习vue,学的我是头昏脑涨,作为一个前端萌新选手,前端大佬无疑是我现在的目标,那么脚踏实地,记录一点一滴,我觉得是我现在有必要做的,前几天公司做大屏,我被echarts搞的要眼瞎,但还好,都挺过来了,前几篇里介绍了echarts里面的圆环,个人觉得还是比较详细,还是有借鉴之处,都是自己走过的坑。

        之前面试其他公司面试官问过我一个问题,react的运行环境怎么搭?

        我:**,还有问这个的(后来才知道面试官是个后端小哥,前端的东西他也实在是不知道问啥。要么就问我ajax)

        那么在这里,我觉得有必要记录记录vue怎么创建模板项目(vue-cli)

        vue-cli是vue官方提供的一种脚手架工具

        vue官网:https://cn.vuejs.org/v2/guide/installation.html(官网写的更详细,我萌新就不做过多介绍,来干货!)

        创建vue项目

    

    npm install -g vue-cli        //全局安装cli(node就不用说了,自己装)
   vue init webpack vue_demo     //vue_demo为创建的项目名称,前面固定写法
   cd vue_demo                   //进入到项目里
   npm install                   //下载依赖
   npm run dev                   //运行环境,npm start也可以 npm install -g vue-cli        //全局安装cli(node就不用说了,自己装)
   vue init webpack vue_demo     //vue_demo为创建的项目名称,前面固定写法
   cd vue_demo                   //进入到项目里
   npm install                   //下载依赖
   npm run dev                   //运行环境,npm start也可以

      还有就是如果想下载路由之类的,直接下载,还有什么axios啊,vuex啊,下就完了,这些在以后的文章里都会慢慢介绍,把我的经验和一些亲自踩过的坑都记录下来。

   npm install vue-router --save  
    --save参数的作用:在包配置文件 package.json 文件添加对应的配置-save参数的作用:在包配置文件 package.json 文件添加对应的配置

   

  模板项目结构(这只是最初搭建完的结构)

    |-- build : webpack相关的配置文件夹(基本不需要修改)
        |-- dev-server.js :通过 express 启动后台服务器
    |-- config: webpack相关的配置文件夹(基本不需要修改)
        |-- index.js: 指定的后台服务的端口号和静态资源文件夹
    |-- node_modules
    |-- src :源码文件夹
        |-- components: vue组件及其相关资源文件夹
        |-- App.vue:应用根主组件
        |-- main.js:应用入口 js
    |-- static:静态资源文件夹
    |-- .babelrc: babel 的配置文件
    |-- .eslintignore: eslint 检查忽略的配置
    |-- .eslintrc.js: eslint 检查的配置
    |-- .gitignore: git 版本管制忽略的配置
    |-- index.html: 主页面文件
    |-- package.json: 应用包配置文件

    |-- README.md: 应用描述说明的 readme 文件

        另外webstorm自带cmd(Terminal),就不用再shift+鼠标右键打开命令行了,webstorm中Alt+F12调出控制台直接npm run dev,然后访问访问: http://localhost:8080/  非常好用!、

        下期见,希望各位大佬批评指正。

Logo

前往低代码交流专区

更多推荐