vue项目-创建项目

xingye 2019-09-08

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

node -v    //检查是否安装node
npm install webpack -g    //webpack是一个包管理工具,也是vue-cli的构建工具,全局安装
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/

相关推荐

lyjava / 0评论 2020-07-30