美文网首页
vue项目 - 创建项目

vue项目 - 创建项目

作者: 背着生活往前走你才辨的出美和丑 | 来源:发表于2020-12-18 08:24 被阅读0次

    1.首先具备一定的前端基础,常规的HTML+CSS+Js/jqeury必须熟练,这是后期开发的基础。
    2.明白node是什么东西,明白npm能干什么。
    3.打开cmd窗口,我用的PowerCmd.

    node -v    //检查是否安装node
    npm install webpack -g    //webpack是一个包管理工具,也是vue-cli的构建工具,全局安装
    npm uninstall echarts     //依赖包也可以删除
    npm install vue-cli -g    //vue-cli的安装,快速搭建项目的工具
    vue -V    //查看vue-cli是否安装成功
    

    4.构建工程文件
    vue init <template-name> <project-name>
    webpack:一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
    webpack-simple:一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
    browserify:一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
    browserify-simple:一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
    simple:一个最简单的单页应用模板。

    vue init webpack projectName    
    //'git' 不是内部或外部命令,也不是可运行的程序或批处理文件。下载git解决
    
    E:\vue>vue init webpack test
    
    ? Project name test//项目名称(注意名称中不要出现大写字母,否则会报错)
    ? Project description A Vue.js project//项目描述(可写可不写,看个人需要)
    ? Author//作者(可写可不写,看个人需要)
    ? Vue build (Use arrow keys)
    ? Vue build standalone
    ? Install vue-router? Yes//是否安装vue-router是否安装vue路由工具
    ? Use ESLint to lint your code? Yes//是否用ESLint来限制你的代码错误和风格。不需要输入n,需要选择y,如果是大型团队开发,最好是进行配置
    ? Pick an ESLint preset Standard
    ? Set up unit tests No//设置单元测试
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created?//项目创建后,我们应该为您运行“NPM安装”吗?
    

    使用cmd命令cd移动到项目根目录

    npm config get registry//查看npm镜像源https://registry.npmjs.org/
    //更改镜像源为淘宝镜像
    npm config set registry http://registry.npm.taobao.org
    npm install    //初始化项目,安装package.json 文件中描述的依赖
    npm run dev    //运行我们的项目,这个时候,我们可以打开浏览器,输入http://localhost:8080/
    

    相关文章

      网友评论

          本文标题:vue项目 - 创建项目

          本文链接:https://www.haomeiwen.com/subject/paiagktx.html